.showcase-hero { overflow: hidden; padding: 7.5rem 0 4.5rem; background: radial-gradient(ellipse at 85% 30%, color-mix(in srgb, var(--color-border-subtle) 32%, transparent), transparent 60%), var(--color-bg-canvas); }
.showcase-hero-grid { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 3rem; }
.showcase-connection { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin: 0 0 1.5rem; color: var(--color-text-secondary); font-size: .78rem; }
.showcase-connection img { object-fit: contain; }
.showcase-connection > span { color: var(--color-direction); }
.showcase-lede { margin: 1.5rem 0 0; max-width: 53ch; color: var(--color-text-secondary); font-size: 1rem; line-height: 1.8; }
.showcase-hero .hero-actions { gap: 1.5rem; }
.showcase-text-link { display: inline-flex; align-items: center; gap: .5rem; color: var(--color-brand); font-size: .82rem; line-height: 1.6; text-decoration: none; text-underline-offset: .3em; }
.showcase-text-link:hover { text-decoration: underline; }
.showcase-plan-access { margin: 1.5rem 0; padding: 1rem 1.25rem; border: 1px solid var(--color-border-default); border-left: 3px solid var(--color-brand); background: var(--color-bg-panel); }
.showcase-plan-access > strong { display: block; margin-top: .5rem; color: var(--color-text-primary); font-size: .9rem; line-height: 1.6; }
.showcase-plan-access > p { margin: .4rem 0 .6rem; color: var(--color-text-secondary); font-size: .78rem; line-height: 1.7; }
.showcase-plan-access .showcase-text-link { font-size: .73rem; }
.showcase-hero-visual { min-width: 0; margin: 0; border: 1px solid var(--color-border-default); background: var(--color-bg-panel); box-shadow: 8px 8px 0 var(--color-border-subtle); }
.showcase-hero-visual--portrait { width: min(100%, 430px); justify-self: center; }
.showcase-hero-visual--portrait .showcase-capture { background: #1e1e1e; }
.showcase-hero-visual--portrait .showcase-capture img { max-height: 435px; object-fit: contain; }
.showcase-frame-heading, .showcase-shot-label { display: flex; align-items: center; gap: .65rem; padding: 1rem; color: var(--color-text-secondary); font-family: var(--font-mono); font-size: .63rem; line-height: 1.6; }
.showcase-frame-heading > span:last-child { margin-left: auto; color: var(--color-direction); }
.showcase-status-dot { width: 6px; height: 6px; flex-shrink: 0; background: var(--color-direction); }
.showcase-capture { display: block; cursor: zoom-in; overflow: hidden; }
.showcase-capture img { display: block; width: auto; max-width: 100%; height: auto; margin-inline: auto; }
.showcase-demo-image { display: block; width: 100%; height: auto; }
.showcase-hero-visual figcaption, .showcase-shot figcaption { display: flex; justify-content: space-between; gap: 1rem; margin: 0; padding: .9rem 1rem; color: var(--color-text-muted); font-size: .65rem; line-height: 1.7; }
.showcase-hero-visual figcaption > span:last-child { color: var(--color-direction); white-space: nowrap; }
.showcase-feature-strip { display: flex; flex-wrap: wrap; gap: .6rem 1rem; padding: 1rem; border-top: 1px solid var(--color-border-subtle); color: var(--color-brand); font-size: .65rem; }
.showcase-jump-nav { border-block: 1px solid var(--color-border-subtle); background: var(--color-bg-panel); }
.showcase-jump-nav .container { display: grid; grid-template-columns: repeat(5, 1fr); }
.showcase-jump-nav--four .container { grid-template-columns: repeat(4, 1fr); }
.showcase-jump-nav--three .container { grid-template-columns: repeat(3, 1fr); }
.showcase-jump-nav a { display: flex; gap: .75rem; align-items: center; padding: 1.35rem .85rem; color: var(--color-text-secondary); font-size: .76rem; text-decoration: none; transition: background 180ms ease, color 180ms ease; }
.showcase-jump-nav a:hover { background: var(--color-bg-subtle); color: var(--color-text-primary); }
.showcase-jump-nav a span { color: var(--color-direction); font-size: .65rem; }
.showcase-feature { scroll-margin-top: 85px; padding-block: 5.5rem; }
.showcase-feature--tinted { background: var(--color-bg-panel); border-block: 1px solid var(--color-border-subtle); }
.showcase-feature-grid { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: clamp(3rem, 7vw, 6rem); }
.showcase-feature h2 { margin: 0 0 1.5rem; font-family: var(--font-brand); font-size: clamp(1.9rem, 3vw, 2.65rem); line-height: 1.2; letter-spacing: -.045em; }
.showcase-feature h2 span { color: var(--color-brand); }
.showcase-feature-copy > p:not(.eyebrow), .showcase-section-intro > p:not(.eyebrow) { color: var(--color-text-secondary); line-height: 1.8; font-size: .95rem; }
.showcase-detail-list { padding: 0; margin: 2rem 0; list-style: none; }
.showcase-detail-list li { position: relative; padding: 1.15rem 0 1.15rem 1.4rem; border-top: 1px solid var(--color-border-subtle); }
.showcase-detail-list li::before { content: "+"; position: absolute; left: 0; top: 1.15rem; color: var(--color-direction); }
.showcase-detail-list strong, .showcase-detail-list span { display: block; }
.showcase-detail-list strong { margin-bottom: .45rem; font-size: .86rem; line-height: 1.6; }
.showcase-detail-list span { color: var(--color-text-secondary); font-size: .82rem; line-height: 1.75; }
.showcase-feature .showcase-footnote { color: var(--color-text-muted); font-size: .7rem; line-height: 1.8; }
.showcase-detail-list span strong { display: inline; font-size: inherit; }
.showcase-cli-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 3rem; }
.showcase-cli-gallery { min-width: 0; }
.showcase-cli-gallery [hidden] { display: none; }
.showcase-cli-views { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.showcase-cli-views button { flex: 1; min-height: 44px; padding: .65rem .5rem; border: 1px solid var(--color-border-default); background: var(--color-bg-panel); color: var(--color-text-secondary); font-size: .73rem; line-height: 1.5; cursor: pointer; }
.showcase-cli-views button:hover { border-color: var(--color-direction); }
.showcase-cli-views button[aria-pressed="true"] { border-color: var(--color-brand); background: var(--color-bg-subtle); color: var(--color-brand); box-shadow: inset 0 -3px 0 var(--color-brand); }
.showcase-cli-gallery figure + figure { margin-top: 1.5rem; }
.showcase-cli-gallery.is-interactive figure + figure { margin-top: 0; }
.showcase-shot { min-width: 0; margin: 0; border: 1px solid var(--color-border-default); background: var(--color-bg-canvas); box-shadow: 6px 6px 0 var(--color-border-subtle); }
.showcase-shot--usage { width: min(100%, 432px); justify-self: center; }
.showcase-shot-label { justify-content: space-between; border-bottom: 1px solid var(--color-border-subtle); color: var(--color-direction); }
.showcase-shot figcaption { border-top: 1px solid var(--color-border-subtle); }
.showcase-shot--chat { width: min(100%, 443px); justify-self: center; }
.showcase-section-intro { max-width: 690px; margin-bottom: 3rem; }
.showcase-model-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; }
.showcase-model-options article { position: relative; margin-bottom: 1.8rem; padding-left: 1.25rem; border-left: 2px solid var(--color-border-default); }
.showcase-model-options article:last-child { margin-bottom: 0; border-color: var(--color-direction); }
.showcase-control-label { color: var(--color-brand); font-size: .64rem; letter-spacing: .12em; }
.showcase-control-label--fast { color: var(--color-direction); }
.showcase-feature h3 { margin: .7rem 0; font-size: 1.05rem; line-height: 1.5; letter-spacing: -.025em; }
.showcase-model-options p, .showcase-workflow-grid p { margin: 0; color: var(--color-text-secondary); font-size: .82rem; line-height: 1.8; }
.showcase-model-visuals { align-self: center; min-width: 0; }
.showcase-use-case { margin: 2rem 0 1.5rem; padding: 1.4rem; border: 1px dashed var(--color-border-default); background: var(--color-bg-canvas); }
.showcase-use-case > span { color: var(--color-direction); font-size: .63rem; letter-spacing: .07em; }
.showcase-use-case p { font-size: .9rem; line-height: 1.7; }
.showcase-use-case small { display: block; color: var(--color-text-secondary); font-size: .73rem; line-height: 1.8; }
.showcase-workflow-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.showcase-workflow-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.showcase-workflow-grid article { padding: 1.5rem; border: 1px solid var(--color-border-default); background: var(--color-bg-canvas); transition: border-color 180ms ease, transform 180ms ease; }
.showcase-workflow-grid article:hover { transform: translateY(-3px); border-color: var(--color-direction); }
.showcase-workflow-grid .showcase-text-link { margin-top: 1rem; font-size: .7rem; }
.showcase-workflow-grid .showcase-use-case { margin-bottom: 0; }
.showcase-tools-detail { margin-top: 4rem; }
.showcase-vision-demo { display: grid; grid-template-columns: minmax(0, .4fr) minmax(0, 1fr); align-items: center; gap: 2rem; }
.showcase-subscription { display: flex; align-items: center; gap: 1.5rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--color-border-default); }
.showcase-subscription > img { flex-shrink: 0; object-fit: contain; }
.showcase-subscription h3 { margin: 0 0 .5rem; }
.showcase-subscription p { max-width: 75ch; margin: 0; color: var(--color-text-secondary); font-size: .8rem; line-height: 1.8; }
.showcase-subscription > a { margin-left: auto; flex-shrink: 0; }
.openrouter-showcase .showcase-hero-grid, .opencode-go-showcase .showcase-hero-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.openrouter-showcase .showcase-hero { padding-block: 5rem 2rem; }
.opencode-go-showcase .showcase-hero { padding-block: 7.5rem 2rem; }
.openrouter-access { display: flex; align-items: center; gap: .65rem; margin-top: 1.75rem; color: var(--color-text-secondary); font-size: .75rem; }
.openrouter-demo-note, .showcase-demo-note { margin: 2.5rem 0 0; color: var(--color-text-muted); font-size: .7rem; line-height: 1.8; }
.openrouter-discovery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.openrouter-discovery-grid article { padding-top: 1.5rem; border-top: 1px solid var(--color-border-default); }
.openrouter-discovery-grid p, .openrouter-reasoning p, .openrouter-usage-grid article > p { margin: 0; color: var(--color-text-secondary); font-size: .85rem; line-height: 1.8; }
.openrouter-reasoning { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; margin-block: 3rem 1.5rem; padding: 1.75rem 2rem; border-left: 3px solid var(--color-brand); background: var(--color-bg-panel); }
.openrouter-reasoning h3 { margin-bottom: 0; }
.openrouter-tools-grid > .showcase-feature-copy { grid-column: 2; grid-row: 1; }
.openrouter-tools-grid > figure { grid-column: 1; grid-row: 1; }
.openrouter-usage-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; }
.openrouter-usage-grid .showcase-shot { margin-top: 1.5rem; }
.openrouter-usage-grid .showcase-capture { aspect-ratio: 860 / 520; background: #242424; }
.openrouter-usage-grid .showcase-capture img { width: 100%; }
.openrouter-showcase .showcase-feature-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); }
@media (max-width: 1050px) {
    .showcase-hero-grid { gap: 2rem; }
    .showcase-workflow-grid { grid-template-columns: repeat(2, 1fr); }
    .showcase-model-grid { gap: 2.5rem; }
    .showcase-jump-nav a { gap: .5rem; padding-inline: .5rem; font-size: .68rem; }
}
@media (max-width: 800px) {
    .openrouter-showcase .showcase-hero-grid, .opencode-go-showcase .showcase-hero-grid, .openrouter-showcase .showcase-feature-grid, .openrouter-discovery-grid, .openrouter-reasoning, .openrouter-usage-grid { grid-template-columns: 1fr; }
    .openrouter-showcase .showcase-hero { padding-top: 3rem; }
    .openrouter-reasoning { padding: 1.5rem; gap: 1rem; }
    .openrouter-tools-grid > .showcase-feature-copy, .openrouter-tools-grid > figure { grid-column: auto; grid-row: auto; }
    .showcase-hero { padding: 6.5rem 0 3.5rem; }
    .showcase-hero-grid, .showcase-feature-grid, .showcase-model-grid, .showcase-vision-demo { grid-template-columns: 1fr; gap: 3rem; }
    .showcase-vision-demo > .showcase-shot { width: min(100%, 320px); justify-self: center; }
    .showcase-hero-visual { max-width: 650px; transform: none; }
    .showcase-feature { padding-block: 3.5rem; }
    .showcase-jump-nav .container { grid-template-columns: repeat(2, 1fr); }
    .showcase-jump-nav a { padding: 1rem .5rem; font-size: .72rem; }
    .showcase-subscription { flex-wrap: wrap; }
    .showcase-subscription > div { flex: 1; min-width: 220px; }
    .showcase-subscription > a { margin-left: 0; }
}
@media (max-width: 480px) {
    .showcase-workflow-grid { grid-template-columns: 1fr; }
    .showcase-hero-visual figcaption { flex-direction: column; gap: .25rem; }
    .showcase-connection { font-size: .66rem; gap: .4rem; }
    .showcase-connection img { width: 24px; height: 24px; }
    .showcase-shot-label { font-size: .58rem; }
    .showcase-feature h2 { font-size: 1.8rem; }
}
@media (prefers-reduced-motion: reduce) {
    html:has(.showcase-hero) { scroll-behavior: auto; }
    .showcase-capture img, .showcase-workflow-grid article, .showcase-jump-nav a { transition: none; }
    .showcase-workflow-grid article:hover { transform: none; }
}