/* Local AI workflow showcase: lightweight HTML examples, no inference bundle. */
.local-showcase { background: radial-gradient(ellipse at 20% 45%, #183f2e33, transparent 65%); }
.local-showcase-card { display: grid; grid-template-columns: minmax(250px, .8fr) minmax(0, 1.55fr); border: 1px solid var(--line-strong); border-radius: 24px; overflow: hidden; background: #0d1714; box-shadow: 0 28px 90px #0003; }
.local-showcase-guide { padding: 36px; border-right: 1px solid var(--line); background: linear-gradient(150deg, #24493633, transparent 70%); }
.local-showcase-eyebrow, .local-showcase-benefits article > span { color: #9db9a9; font: 9px var(--mono); letter-spacing: .1em; }
.local-showcase-guide h3 { margin: 22px 0 15px; font: 500 clamp(24px, 2.6vw, 34px)/1.2 var(--display); letter-spacing: -.05em; }
.local-showcase-guide > p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.85; }
.local-showcase-tabs { display: grid; gap: 6px; margin: 27px -12px 26px; }
.local-showcase-tabs button { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 12px; border: 1px solid transparent; border-radius: 9px; text-align: left; background: transparent; color: var(--muted); cursor: pointer; }
.local-showcase-tabs button > span:first-child { font: 10px var(--mono); opacity: .7; }
.local-showcase-tabs button > span:last-child { margin-left: auto; }
.local-showcase-tabs strong { font-size: 12px; font-weight: 500; }
.local-showcase-tabs button:hover { background: #b9f9d408; color: var(--text); }
.local-showcase-tabs button[aria-selected="true"] { background: #98e9bb0d; border-color: var(--accent-line); color: var(--accent); }
.local-showcase-engine { display: flex; align-items: center; gap: 14px; padding-top: 22px; border-top: 1px solid var(--line); }
.local-showcase-engine > span { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--accent-line); border-radius: 11px; background: #99efc208; color: var(--accent); font-size: 26px; }
.local-showcase-engine p { margin: 0; font-size: 11px; line-height: 1.8; color: var(--muted); }
.local-showcase-engine strong { color: var(--text-soft); font-weight: 400; }
.local-showcase-screen { min-width: 0; display: flex; flex-direction: column; background: linear-gradient(150deg, #16231e, #0c1411); }
.local-showcase-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 19px 26px; border-bottom: 1px solid var(--line); font-size: 12px; }
.local-showcase-toolbar > span { display: flex; align-items: center; gap: 10px; }
.local-showcase-status { color: var(--accent); font: 10px var(--mono); }
.local-showcase-status i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 14px #9df3cf55; }
.local-showcase-example { flex: 1; padding: 26px 30px; min-height: 420px; }
.local-showcase-context { display: flex; flex-wrap: wrap; gap: 8px; color: #a3b4aa; font-size: 10px; line-height: 1.7; }
.local-showcase-context > span { margin-right: 3px; font: 8px/2 var(--mono); letter-spacing: .08em; color: var(--accent); }
.local-showcase-context b { color: #617469; font-weight: 400; }
.local-showcase-question { margin: 25px 0 26px 42px; padding: 15px 18px; border: 1px solid #c8edda12; border-radius: 12px 12px 3px 12px; background: #bfdac507; }
.local-showcase-question > span, .local-showcase-answer > div > span { font: 8px var(--mono); letter-spacing: .08em; color: var(--muted); }
.local-showcase-question p { margin: 8px 0 0; font-size: 13px; line-height: 1.75; color: var(--text-soft); }
.local-showcase-answer { display: flex; gap: 13px; align-items: flex-start; }
.local-showcase-avatar { flex-shrink: 0; width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid var(--accent-line); border-radius: 9px; color: var(--accent); background: #a1e3ba09; font-size: 18px; }
.local-showcase-answer > div { min-width: 0; flex: 1; }
.local-showcase-answer p, .local-showcase-answer li, .local-showcase-answer blockquote { color: var(--text-soft); font-size: 12px; line-height: 1.85; }
.local-showcase-answer p { margin: 10px 0 13px; }
.local-showcase-answer pre { padding: 15px 17px; border: 1px solid var(--line); border-radius: 8px; background: #07100b; color: #b9e5ca; font: 11px/1.9 var(--mono); overflow-x: auto; margin: 14px 0; }
.local-showcase-answer ol { padding-left: 17px; margin: 14px 0; }
.local-showcase-answer li { padding-left: 5px; margin-bottom: 7px; }
.local-showcase-answer blockquote { margin: 18px 0; padding: 4px 0 4px 17px; border-left: 2px solid var(--accent-line); color: var(--accent); }
.local-showcase-answer .local-showcase-detail { font-size: 10px; color: var(--muted); }
.local-showcase-handoff { display: flex; gap: 12px; padding: 17px 0 0; margin: 21px 0 0 42px; border-top: 1px solid var(--line); }
.local-showcase-handoff > span { color: var(--accent); }
.local-showcase-handoff p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.85; }
.local-showcase-handoff strong { color: #cce3d5; font-weight: 500; }
.local-showcase-draft { margin: 18px 0 0 42px; }
.local-showcase-draft button { display: inline-flex; gap: 16px; padding: 10px 14px; border-radius: 7px; border: 1px solid var(--accent-line); background: #9df3cf12; color: var(--accent); font-size: 11px; cursor: pointer; }
.local-showcase-draft p { margin: 12px 0 0; color: var(--muted); font-size: 10px; line-height: 1.7; }
.local-showcase-draft.is-prepared { border-left: 2px solid var(--accent); padding-left: 14px; }
.local-showcase-screen-foot { display: flex; justify-content: space-between; gap: 12px; padding: 16px 26px; border-top: 1px solid var(--line); color: var(--muted); font: 9px/1.7 var(--mono); }
.local-showcase-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; padding: 37px 0 32px; }
.local-showcase-benefits h3 { margin: 14px 0 10px; font: 500 17px/1.45 var(--display); letter-spacing: -.025em; }
.local-showcase-benefits p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.85; }
.local-showcase-availability { display: flex; align-items: center; justify-content: space-between; gap: 32px; border-top: 1px solid var(--line); padding-top: 22px; }
.local-showcase-availability p { max-width: 690px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.9; }
.local-showcase-availability strong { color: var(--text-soft); font-weight: 500; }
.local-showcase-availability a { flex-shrink: 0; font-size: 11px; color: var(--accent); }
.local-showcase-availability a span { margin-left: 10px; }
@media (max-width: 900px) {
  .local-showcase-guide { padding: 26px; }
  .local-showcase-example { padding: 24px; }
  .local-showcase-card { grid-template-columns: minmax(230px, .8fr) minmax(0, 1.4fr); }
}
@media (max-width: 700px) {
  .local-showcase-card { grid-template-columns: 1fr; border-radius: 16px; }
  .local-showcase-guide { border-right: 0; border-bottom: 1px solid var(--line); padding: 24px; }
  .local-showcase-guide h3 { margin-top: 16px; }
  .local-showcase-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 20px -8px 0; gap: 4px; }
  .local-showcase-tabs button { gap: 8px; padding: 10px 8px; }
  .local-showcase-tabs strong { font-size: 11px; }
  .local-showcase-tabs button > span:last-child { display: none; }
  .local-showcase-engine { margin-top: 20px; padding-top: 16px; }
  .local-showcase-example { min-height: 0; padding: 22px 18px; }
  .local-showcase-toolbar, .local-showcase-screen-foot { padding: 16px 18px; }
  .local-showcase-question { margin-left: 0; }
  .local-showcase-handoff, .local-showcase-draft { margin-left: 0; }
  .local-showcase-answer { gap: 9px; }
  .local-showcase-answer pre { font-size: 10px; padding: 12px; }
  .local-showcase-benefits { grid-template-columns: 1fr; gap: 26px; }
  .local-showcase-benefits h3 { margin-top: 10px; }
  .local-showcase-availability { flex-direction: column; align-items: flex-start; gap: 15px; }
}