/* Real console screens. Off by default only when the reviewer turns them off. */
:root[data-shots="off"] .product-shot{display:none}

.product-shot{margin:0}
.product-shot .shot-frame{
 position:relative;overflow:hidden;border-radius:6px;background:#1b1a1d;
 border:1px solid color-mix(in srgb,var(--steel,#7f8f9e) 40%,transparent);
 box-shadow:0 18px 40px -24px rgba(0,0,0,.6)}
.product-shot img{display:block;width:100%;height:auto}
.product-shot figcaption{
 margin-top:10px;font-size:12.5px;letter-spacing:.01em;color:var(--muted);
 display:flex;gap:8px;align-items:baseline}
.product-shot figcaption .shot-source{
 text-transform:uppercase;letter-spacing:.09em;font-size:11px;
 color:color-mix(in srgb,var(--steel,#7f8f9e) 85%,var(--muted))}
.product-shot figcaption .shot-source::after{content:'·';margin-left:8px;color:var(--muted)}

/* Explorer: the screen sits beside the words, in a fixed frame so the
   play sequence never makes the section jump. */
:root:not([data-shots="off"]) body.website #relationships .relationship-detail{
 grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);column-gap:40px;align-items:start}
:root:not([data-shots="off"]) body.website #relationships .relationship-detail>:not(.product-shot){grid-column:1}
:root:not([data-shots="off"]) body.website #relationships .relationship-detail>.product-shot{grid-column:2;grid-row:1 / span 3}
.explorer-shot .shot-frame{height:300px}
.explorer-shot img{height:100%;width:100%}
/* A tall dialog is cut, not shrunk: fade where it is cut. */
.explorer-shot[data-node="compute"] .shot-frame,
.explorer-shot[data-node="database"] .shot-frame,
.explorer-shot[data-node="secrets"] .shot-frame{
 -webkit-mask-image:linear-gradient(#000 80%,transparent);mask-image:linear-gradient(#000 80%,transparent)}
.explorer-shot[data-node="compute"] .shot-frame{
 -webkit-mask-image:linear-gradient(transparent,#000 20%);mask-image:linear-gradient(transparent,#000 20%)}
.explorer-shot[data-node="permissions"] img,.explorer-shot[data-node="llm"] img{padding:22px 0}

/* Trust ribbon: the console, full width under the words. */
.ribbon .ribbon-shot{grid-column:1 / -1;margin-top:8px}
.ribbon .ribbon-shot .shot-frame{max-height:420px}

@media (max-width:800px){
 :root:not([data-shots="off"]) body.website #relationships .relationship-detail{grid-template-columns:1fr}
 :root:not([data-shots="off"]) body.website #relationships .relationship-detail>.product-shot{grid-column:1;grid-row:auto}
 .explorer-shot .shot-frame{height:240px}
}
/* Phones: the console screen shrinks to unreadable, so the words stand alone. */
@media (max-width:640px){
 .ribbon .ribbon-shot{display:none}
}
@media (prefers-reduced-motion:no-preference){
 .explorer-shot img{transition:opacity .2s ease}
}

/* Preview bar only (never shipped): it already overran narrow screens, and the
   Images switch made it longer. Let it wrap instead of widening the page. */
.theme-toolbar-inner{flex-wrap:wrap;row-gap:6px}