/* Dark gallery chrome gives the actual workspace a distinct frame. */
.concept-8 .c8-viewer-head > div:first-of-type { min-width: 0; }
.concept-8 .c8-viewer-controls { flex-shrink: 0; }
.concept-8 .c8-viewer-head, .concept-8 .c8-gallery-nav { background: #202630; color: #fff; border-color: #343c48; }
.concept-8 .c8-viewer-head { padding: 12px 22px; gap: 12px; }
.concept-8 .c8-viewer-head h2 { font-size: 18px; }
.concept-8 .c8-viewer-head p, .concept-8 #c8-gallery-count { color: #a7b1c0; }
.concept-8 .c8-viewer-head > img { width: 22px; height: 22px; padding: 8px; background: transparent; border: 0; border-radius: 0; filter: brightness(0) invert(1); }
.concept-8 .c8-viewer-controls button, .concept-8 .c8-gallery-toolbar button { background: transparent; border: 0; border-radius: 8px; color: #d4dbe4; }
.concept-8 .c8-viewer-controls button:hover, .concept-8 .c8-gallery-toolbar button:hover { background: #414c5c; }
.concept-8 .c8-viewer-controls button { width: 36px; height: 36px; }
.concept-8 .c8-gallery-search { background: #ffffff08; border-color: #ffffff12; border-radius: 8px; color: #b3bece; }
.concept-8 .c8-gallery-search input { color: #fff; }
.concept-8 .c8-gallery-search input::placeholder { color: #b3bece; opacity: 1; }
.concept-8 .c8-gallery-strip { gap: 6px; padding-block: 3px 6px; scrollbar-color: #536072 transparent; }
.concept-8 .c8-gallery-strip button { flex-basis: 104px; min-height: 86px; padding: 12px 10px 10px; gap: 9px; color: #aeb8c5; border: 0; border-radius: 10px; }
.concept-8 .c8-gallery-strip button:hover { background: #303a48; color: #fff; }
.concept-8 .c8-gallery-strip img { width: 21px; height: 21px; padding: 6px; background: transparent; border: 0; filter: brightness(0) invert(1); opacity: .7; border-radius: 0; }
.concept-8 .c8-gallery-strip button[aria-pressed="true"] { background: #050608; border: 0; color: #fff; box-shadow: none; }
.concept-8 .c8-gallery-strip button[aria-pressed="true"] img { background: transparent; border: 0; box-shadow: none; opacity: 1; }
.concept-8 .c8-gallery-strip button:focus-visible, .concept-8 .c8-viewer-controls button:focus-visible, .concept-8 .c8-gallery-toolbar button:focus-visible { outline: 2px solid #b3cbe9; outline-offset: -2px; }
.concept-8 #c8-gallery-empty { color: #c5cfdd; }
.concept-8 #c8-viewer-expand { display: none; }
/* Hover is a side panel; only an explicit expand opens the full modal. */
.concept-8 .c8-viewer[data-mode="hover"] { inset: auto; left: var(--preview-left); top: var(--preview-top); width: var(--preview-width); height: var(--preview-height); margin: 0; border-radius: 18px; box-shadow: 0 24px 80px #111c3433, 0 3px 10px #111c3414; }
.concept-8 .c8-viewer[data-mode="hover"] #c8-viewer-expand { display: grid; }
.concept-8 .c8-viewer[data-mode="hover"] .c8-viewer-head { padding: 10px 14px; gap: 9px; }
.concept-8 .c8-viewer[data-mode="hover"] .c8-viewer-head h2 { font-size: 17px; }
.concept-8 .c8-viewer[data-mode="hover"] .c8-viewer-head p { display: none; }
.concept-8 .c8-viewer[data-mode="hover"] .c8-viewer-head > img { width: 19px; height: 19px; padding: 5px; }
.concept-8 .c8-viewer[data-mode="hover"] .c8-viewer-controls button { width: 31px; height: 31px; }
.concept-8 .c8-viewer[data-mode="hover"] .c8-viewer-body { grid-template-columns: 190px minmax(0,1fr); }
.concept-8 .c8-viewer[data-mode="hover"] .c8-viewer-agent { padding: 15px; }
.concept-8 .c8-viewer[data-mode="hover"] .c8-gallery-agent-logos { gap: 5px; margin-bottom: 9px; }
.concept-8 .c8-viewer[data-mode="hover"] .c8-gallery-agent-logos img { width: 17px; height: 17px; padding: 0; }
.concept-8 .c8-viewer[data-mode="hover"] .c8-gallery-agent-title { padding-bottom: 12px; }
.concept-8 .c8-viewer[data-mode="hover"] .c8-gallery-agent-title strong { font-size: 13px; }
.concept-8 .c8-viewer[data-mode="hover"] .c8-gallery-agent-title > span { font-size: 10px; }
.concept-8 .c8-viewer[data-mode="hover"] .c8-gallery-conversation { padding-block: 14px; }
.concept-8 .c8-viewer[data-mode="hover"] .c8-gallery-request { margin-left: 10px; padding: 10px; }
.concept-8 .c8-viewer[data-mode="hover"] #c8-dialog-prompt, .concept-8 .c8-viewer[data-mode="hover"] #c8-dialog-answer { font-size: 12px; line-height: 1.6; }
.concept-8 .c8-viewer[data-mode="hover"] .c8-gallery-reply { margin-top: 16px; }
.concept-8 .c8-viewer[data-mode="hover"] .c8-gallery-workspace-label { padding: 12px 14px 0; font-size: 10px; }
.concept-8 .c8-viewer[data-mode="hover"] #c8-dialog-response { display: none; }
.concept-8 .c8-viewer[data-mode="hover"] .c8-viewer-canvas { padding: 14px; }
.concept-8 .c8-viewer[data-mode="hover"] .c8-gallery-nav { padding: 10px 14px 4px; }
.concept-8 .c8-viewer[data-mode="hover"] .c8-gallery-browse strong { font-size: 11px; }
.concept-8 .c8-viewer[data-mode="hover"] .c8-gallery-strip { gap: 6px; padding-block: 3px 7px; }
.concept-8 .c8-viewer[data-mode="hover"] .c8-gallery-strip button { flex-basis: 92px; min-height: 78px; padding: 10px 8px; font-size: 9px; gap: 8px; }
.concept-8 .c8-viewer[data-mode="hover"] .c8-gallery-strip img { width: 19px; height: 19px; padding: 5px; }
.concept-8 .c8-viewer[data-mode="hover"][data-compact="true"] .c8-viewer-body { grid-template-columns: minmax(0,1fr); }
.concept-8 .c8-viewer[data-mode="hover"][data-compact="true"] .c8-gallery-browse strong { display: none; }
.concept-8 .c8-viewer[data-mode="hover"][data-compact="true"] .c8-viewer-agent { display: none; }
.concept-8 .c8-viewer[data-mode="hover"][data-compact="true"] #c8-dialog-response { display: block; max-width: 60%; }
/* Keep the story and custom build on the same rails as the rest of the page. */
.homepage-concept-eight .c5-story > .c5-wrap, .homepage-concept-eight .c5-build > .c5-wrap, .homepage-concept-eight .c5-close > .c5-wrap { width: min(80rem, 100%); max-width: 80rem; padding-inline: 24px; }
.homepage-concept-eight .concept-8 .c8-statement { width: min(1100px, calc(100% - 96px)); font-size: clamp(26px, 3.05vw, 44px); line-height: 1.3; }
@media (min-width: 961px) { .homepage-concept-eight .c5-story-layout { grid-template-columns: minmax(280px,.75fr) minmax(0,1.25fr); gap: 70px; } }
/* An example in the agent's own app, with a real copy action. */
.homepage-concept-eight .c5-close-tools { display: none; }
.homepage-concept-eight .c8-connect-layout { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 80px; text-align: left; }
.homepage-concept-eight .c8-connect-copy h2 { font-size: clamp(38px,4.2vw,58px); }
.homepage-concept-eight .c8-connect-copy > p { font-size: 18px; line-height: 1.7; margin: 24px 0 28px; max-width: 410px; }
.homepage-concept-eight .c8-connect-pricing { display: block; width: fit-content; margin-top: 19px; font-size: 13px; color: #596577; }
.homepage-concept-eight .c8-start-prompt { width: 100%; max-width: none; margin: 0; padding: 0; border-radius: 22px; border: 1px solid #cdd6df; box-shadow: 0 18px 55px -20px #142c4930, 0 3px 8px #142c4908; overflow: hidden; }
.homepage-concept-eight .c8-composer-head { display: flex; align-items: center; gap: 13px; padding: 17px 22px; background: #202630; color: #fff; font-size: 12px; }
.homepage-concept-eight .c8-composer-head small { margin-left: auto; font-size: 10px; color: #aab4c3; }
.homepage-concept-eight .c8-composer-agents { display: flex; gap: 6px; }
.homepage-concept-eight .c8-composer-agents img { box-sizing: content-box; width: 17px; height: 17px; padding: 6px; background: #fff; border-radius: 8px; }
.homepage-concept-eight .c8-composer-body { padding: 26px; }
.homepage-concept-eight .c8-composer-connection { display: flex; align-items: center; gap: 9px; width: fit-content; border: 1px solid #e1e7ec; border-radius: 9px; padding: 8px 11px; font-size: 12px; }
.homepage-concept-eight .c8-composer-connection small { border-left: 1px solid #dce3e9; padding-left: 10px; margin-left: 4px; font-size: 10px; color: #527361; }
.homepage-concept-eight .c8-composer-body h3 { font-size: 22px; font-weight: 500; letter-spacing: -.025em; margin: 27px 0 20px; }
.homepage-concept-eight .c8-composer-input { border: 1px solid #d9e1e8; border-radius: 16px; padding: 20px; background: #fafbfc; }
.homepage-concept-eight .c8-start-prompt #c8-start-request { font-size: 15px; line-height: 1.7; margin: 0; color: #313b48; max-width: none; }
.homepage-concept-eight .c8-composer-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; }
.homepage-concept-eight .c8-composer-actions > span { font-size: 10px; color: #7a8796; }
.homepage-concept-eight #c8-copy-request { display: flex; align-items: center; gap: 9px; padding: 10px 13px; border-radius: 9px; background: #202630; color: #fff; font-size: 12px; }
.homepage-concept-eight #c8-copy-request:hover { background: #394758; }
.homepage-concept-eight #c8-copy-status { font-size: 11px; min-height: 16px; margin-top: 10px; }
.homepage-concept-eight .c5-close-agents { margin-top: 45px; }
@media (max-width: 900px) {
 .homepage-concept-eight .c8-connect-layout { grid-template-columns: minmax(0,1fr); gap: 30px; }
 .homepage-concept-eight .c8-connect-copy { text-align: center; }
 .homepage-concept-eight .c8-connect-copy > p { margin-inline: auto; }
 .homepage-concept-eight .c8-connect-pricing { margin-inline: auto; }
 .homepage-concept-eight .c8-start-prompt { max-width: 650px; margin-inline: auto; }
}
@media (max-width: 640px) {
 .concept-8 .c8-gallery-strip button { flex-basis: 95px; min-height: 98px; padding: 13px 9px; gap: 9px; }
 .concept-8 .c8-gallery-strip img { width: 17px; height: 17px; padding: 11px; }
 .concept-8 .c8-viewer-head { padding: 10px; }
 .concept-8 .c8-viewer-head > img { width: 16px; height: 16px; padding: 9px; }
 .homepage-concept-eight .concept-8 .c8-statement { width: calc(100% - 44px); font-size: clamp(20px,5.5vw,25px); line-height: 1.35; }
 .homepage-concept-eight .c8-connect-copy > p { font-size: 16px; }
 .homepage-concept-eight .c8-composer-head { padding: 14px; gap: 9px; font-size: 11px; }
 .homepage-concept-eight .c8-composer-head small { font-size: 9px; }
 .homepage-concept-eight .c8-composer-body { padding: 18px; }
 .homepage-concept-eight .c8-composer-input { padding: 16px; }
 .homepage-concept-eight .c8-composer-body h3 { font-size: 20px; margin-block: 22px 16px; }
 .homepage-concept-eight .c8-start-prompt #c8-start-request { font-size: 14px; }
 .homepage-concept-eight .c8-composer-actions { flex-wrap: wrap; gap: 10px; }
 .homepage-concept-eight .c8-composer-actions > span { display: none; }
 .homepage-concept-eight #c8-copy-request { margin-left: auto; }
}

@media (max-width: 960px) { .homepage-concept-eight .c5-stage-column { margin-inline: -24px; padding-inline: 24px; } }

/* Keep the optional request directory quiet until someone chooses to explore it. */
.homepage-concept-eight .c5-library { padding-top: 0; border-top: 0; }
.homepage-concept-eight .c8-example-library { border: 1px solid var(--c8-edge); border-radius: 18px; background: #ffffff80; overflow: clip; }
.homepage-concept-eight .c8-example-library > summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 25px 28px; cursor: pointer; list-style: none; }
.homepage-concept-eight .c8-example-library[open] > summary > span { transform: none; }
.homepage-concept-eight .c8-example-library > summary::-webkit-details-marker { display: none; }
.homepage-concept-eight .c8-example-library > summary:hover { background: #ffffffa0; }
.homepage-concept-eight .c8-example-library > summary:focus-visible { outline: 2px solid #556779; outline-offset: -5px; border-radius: 18px; }
.homepage-concept-eight .c8-example-library summary strong { display: block; font-size: 20px; font-weight: 550; letter-spacing: -.025em; }
.homepage-concept-eight .c8-example-library summary small { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); }
.homepage-concept-eight .c8-library-toggle { display: flex; align-items: center; gap: 14px; font-size: 13px; font-weight: 500; flex-shrink: 0; }
.homepage-concept-eight .c8-library-toggle svg { transition: transform .2s; }
.homepage-concept-eight .c8-library-hide, .homepage-concept-eight .c8-example-library[open] .c8-library-show { display: none; }
.homepage-concept-eight .c8-example-library[open] .c8-library-hide { display: inline; }
.homepage-concept-eight .c8-example-library[open] .c8-library-toggle svg { transform: rotate(180deg); }
.homepage-concept-eight .c8-library-content { padding: 0 28px 28px; border-top: 1px solid var(--c8-edge); }
.homepage-concept-eight .c8-library-context { margin: 22px 0 28px; font-size: 14px; color: var(--muted); }
.homepage-concept-eight .c8-library-context a { display: inline-block; text-decoration: underline; text-underline-offset: 4px; color: var(--ink); }
@media (max-width: 640px) {
 .homepage-concept-eight .c8-example-library > summary { padding: 21px 18px; gap: 12px; }
 .homepage-concept-eight .c8-example-library summary strong { font-size: 18px; }
 .homepage-concept-eight .c8-library-toggle > span { display: none !important; }
 .homepage-concept-eight .c8-library-content { padding-inline: 18px; }
}
@media (prefers-reduced-motion: reduce) { .homepage-concept-eight .c8-library-toggle svg { transition: none; } }

/* Match the DashboardLayout accent below the illustrative Custom Tool breadcrumbs. */
.homepage-concept-eight .c5-app-address { position: relative; padding-bottom: 15px; border-bottom: 0; }
.homepage-concept-eight .c5-app-address::after { content: ""; position: absolute; inset: auto 0 0; height: 4px; background: linear-gradient(90deg,#3b82f6,#06b6d4,#6366f1); }

/* Leave an explicit previous/next control on either side of the preview. */
.concept-8 .c8-viewer[data-mode] .c8-viewer-canvas { padding-inline: 58px; }
.concept-8 .c8-media-navigation { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 8px; pointer-events: none; }
.concept-8 .c8-media-navigation button { display: flex; align-items: center; justify-content: center; gap: 7px; width: 42px; height: 42px; flex-shrink: 0; border: 1px solid #ffffff25; border-radius: 50%; color: #fff; background: #202630; box-shadow: 0 3px 10px #1c26381c; pointer-events: auto; transition: background-color 120ms; }
.concept-8 .c8-media-navigation button:hover { background: #415066; }
.concept-8 .c8-media-navigation button:focus-visible { outline: 2px solid #365a83; outline-offset: 3px; }
.concept-8 .c8-media-navigation button span { display: none; }
.concept-8 #c8-dialog-video { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.concept-8 #c8-dialog-video[hidden], .concept-8 #c8-dialog-image[hidden] { display: none; }
@media (max-width: 640px) {
 .concept-8 .c8-viewer[data-mode] .c8-viewer-canvas { display: flex; flex-direction: column; padding: 12px; }
 .concept-8 #c8-dialog-video { height: auto; aspect-ratio: 1540/900; }
 .concept-8 .c8-media-navigation { position: static; width: 100%; padding: 14px 0 0; }
 .concept-8 .c8-media-navigation button { width: auto; height: 40px; padding: 0 13px; border-radius: 20px; font-size: 12px; }
 .concept-8 .c8-media-navigation button span { display: inline; }
}
.concept-8 #c8-dialog-film { display: block; width: 100%; aspect-ratio: 16/9; max-height: 100%; border: 0; border-radius: 6px; background: #080b10; }
.concept-8 #c8-dialog-film[hidden] { display: none; }

/* Loading copy is reserved for a genuinely slow first open, never a quick switch. */
.concept-8 #c8-viewer-status { left: 50%; bottom: 10px; max-width: calc(100% - 32px); transform: translateX(-50%); padding: 0; background: none; box-shadow: none; border-radius: 0; text-align: center; font-size: 11px; }
.concept-8 #c8-viewer-status[hidden] { display: none; }

.concept-8 .c8-viewer[data-mode="hover"] .c8-gallery-composer { display: none; }
.concept-8 .c8-viewer[data-mode="hover"] .c8-gallery-result { padding: 9px; gap: 7px; }

/* Match the closing section's content edges, including its inner gutters. */
body:has(.homepage-concept-eight) > footer { padding-inline: 0; }
body:has(.homepage-concept-eight) > footer > div { width: min(80rem, 100%); max-width: 80rem; padding-inline: 24px; }