/* Shared setup, compact model nodes and output strips form one production system. */
:is(.studio-page, .approach-page) #repeat-production .home-production-flow { box-sizing:border-box; width:100%; max-width:1184px; margin:44px auto 0; padding:0; text-align:left; }
.home-production-flow {
 container-type:inline-size;
 --gsp-ink:var(--gi-text,#24262b); --gsp-muted:var(--gi-muted,#686b73); --gsp-line:var(--gi-line,#e4e5e8);
 color:var(--gsp-ink); font:13px/1.45 var(--gi-font,Inter,sans-serif);
 & *, & *::before, & *::after { box-sizing:border-box; }
 & .gsp .ss-stage { background:transparent; overflow:hidden; font:13px/1.45 var(--gi-font,Inter,sans-serif); color:var(--gsp-ink); }
 & .gsp-rest { position:absolute; width:1px; height:1px; }
 & .gsp-workspace { position:absolute; inset:0; }
 & .gsp-workspace-body, & .gsp-results { display:contents; }
 & .gsp-connections { position:absolute; inset:0; width:100%; height:100%; overflow:visible; fill:none; stroke:var(--gi-muted,#686b73); stroke-width:1; opacity:1; pointer-events:none; }
 & .gsp-connections circle { fill:var(--gi-surface,#fff); }
 & .gsp-connections-compact { display:none; }
 & .gsp-template { position:absolute; left:4.285714%; top:21.634615%; width:25%; padding:20px; border:1px solid var(--gsp-line); border-radius:var(--gi-radius,12px); background:var(--gi-surface,#fff); box-shadow:var(--gi-shadow-focus); }
 & .gsp-eyebrow, & .gsp-setting-label { display:block; color:var(--gsp-muted); font-size:12px; line-height:18px; font-weight:400; }
 & .gsp-template-title { display:flex; align-items:center; gap:9px; margin-top:0; font-size:15px; line-height:22px; font-weight:500; }
 & .gsp-template > .gsp-eyebrow { display:none; }
 & .gsp-template-title svg { color:var(--gsp-muted); flex:none; }
 & .gsp-template-settings { margin-top:20px; }
 & .gsp-setting + .gsp-setting { margin-top:16px; }
 & .gsp-finishes { display:flex; gap:9px; margin-top:8px; }
 & .gsp-finishes button, & .gsp-fallback-finishes label { display:flex; align-items:center; gap:7px; min-height:36px; padding:4px; border:0; border-radius:var(--gi-control-radius,6px); background:transparent; color:var(--gsp-ink); font:12px/18px var(--gi-font,Inter,sans-serif); cursor:pointer; }
 & .gsp-finishes button:hover, & .gsp-fallback-finishes label:hover { background:var(--gi-surface-inset,#f0f0f2); }
 & .gsp-swatch { display:block; width:20px; height:20px; border-radius:50%; box-shadow:inset 0 0 0 1px #24262b14; flex:none; }
 & .gsp-swatch-ink { background:#35556e; }
 & .gsp-swatch-chalk { background:#dedbd1; }
 & .gsp-finishes [aria-checked=true] .gsp-swatch, & .gsp-fallback-finishes input:checked + label .gsp-swatch { outline:1px solid var(--gsp-muted); outline-offset:3px; }
 & :is(button,select):focus-visible, & .gsp-fallback-finishes input:focus-visible + label, & .gsp-still:has(#production-vessel:focus-visible) label[for=production-vessel], & .gsp-still:has(#production-speaker:focus-visible) label[for=production-speaker], & .gsp-still:has(#production-lamp:focus-visible) label[for=production-lamp] { outline:2px solid var(--gi-accent,#688ca8); outline-offset:3px; }
 & .gsp-light-setting { display:flex; align-items:center; justify-content:space-between; gap:8px; }
 & .gsp-light-setting .gsp-setting-value { margin-top:0; }
 & .gsp-setting-value { display:flex; align-items:center; gap:9px; margin-top:8px; min-height:28px; }
 & .gsp-setting-value svg, & .gsp-select svg { flex:none; color:var(--gsp-muted); }
 & .gsp-select { position:relative; display:flex; align-items:center; gap:8px; margin-top:8px; padding:0 9px; width:100%; min-height:36px; border:1px solid var(--gsp-line); border-radius:var(--gi-control-radius,6px); background:var(--gi-surface,#fff); }
 & .gsp-select select { appearance:none; min-width:0; width:100%; height:34px; border:0; background:transparent; color:var(--gsp-ink); font:12px/18px var(--gi-font,Inter,sans-serif); cursor:pointer; }
 & .gsp-select svg:last-child { pointer-events:none; }
 & .gsp-template-foot { margin-top:24px; padding-top:18px; border-top:1px solid var(--gsp-line); color:var(--gsp-muted); font-size:12px; line-height:18px; max-width:180px; text-wrap:balance; }
 & .gsp-template-foot { display:none; }
 & .gsp-output-matrix { position:absolute; left:35.714286%; right:4.285714%; top:13.461538%; bottom:5.769231%; display:grid; grid-template-rows:repeat(3,minmax(0,1fr)); gap:12px; }
 & .gsp-product-column { position:relative; display:grid; grid-template-columns:144px 48px repeat(3,minmax(0,1fr)); gap:16px; align-items:center; min-width:0; }
 & .gsp-product-tab { display:grid; grid-template-columns:18px minmax(0,1fr); align-content:center; align-items:center; gap:8px; width:100%; min-width:0; min-height:64px; padding:0; margin:0; border:0; border-radius:3px; box-shadow:none; color:var(--gsp-muted); background:transparent; font:12px/18px var(--gi-font,Inter,sans-serif); text-align:left; cursor:pointer; }
 & .gsp-product-tab svg { grid-column:1; grid-row:1; flex:none; width:18px; height:18px; }
 & .gsp-model-name { grid-column:2; grid-row:1; }
 & .gsp-model-detail { grid-column:2; display:grid; gap:5px; width:76px; }
 & .gsp-model-detail i { display:block; height:3px; border-radius:2px; background:var(--gsp-line); }
 & .gsp-model-detail i:last-child { width:48px; }
 & .gsp-product-column:not(:last-child)::after { content:""; position:absolute; left:0; right:0; bottom:-6px; border-bottom:1px solid var(--gsp-line); opacity:.45; }
 & .gsp-column-headings { position:absolute; top:24px; left:48px; right:48px; display:grid; grid-template-columns:280px 72px 144px 80px minmax(0,1fr); color:var(--gsp-muted); font:11px/16px var(--gi-font,Inter,sans-serif); }
 & .gsp-column-headings > :nth-child(2) { grid-column:3; }
 & .gsp-column-headings > :nth-child(3) { grid-column:5; }
 & .gsp-product-column > .gsp-image-well[data-view=full] { grid-column:3; }
 & .gsp-product-column > .gsp-image-well[data-view=alternate] { grid-column:4; }
 & .gsp-product-column > .gsp-image-well[data-view=detail] { grid-column:5; }
 & .gsp-product-column[data-receiving] .gsp-product-tab { color:var(--gsp-ink); }
 & .gsp-product-column[data-receiving] .gsp-model-detail i { background:var(--gi-accent,#688ca8); opacity:.45; }
 & .gsp-product-column[data-resolving] .gsp-image-well { animation:gsp-output-settle .65s cubic-bezier(.22,.68,0,1.01) both; }
 & .gsp-product-column[data-resolving] .gsp-image-well[data-view=alternate] { animation-delay:.09s; }
 & .gsp-product-column[data-resolving] .gsp-image-well[data-view=detail] { animation-delay:.18s; }
 & .gsp-product-column .gsp-image-well { transition:opacity .3s ease; }
 & .gsp-output-matrix[data-working] .gsp-product-column:not([data-receiving]) .gsp-image-well { opacity:.48; }
 & .gsp-route-base { stroke:var(--gsp-muted); stroke-width:1.2; opacity:.5; }
 & .gsp-node-port { stroke:var(--gsp-muted); stroke-width:1; opacity:.6; }
 & [data-active] > .gsp-node-port { stroke:var(--gi-accent,#688ca8); opacity:1; }
 & .gsp-route-signal { stroke:var(--gi-accent,#688ca8); opacity:0; stroke-width:1.6; stroke-dasharray:1; stroke-dashoffset:1; }
 & [data-active] > .gsp-route-signal { opacity:.8; animation:gsp-route-travel .4s ease-out both; }
 & [data-active] > .gsp-route-signal-1 { animation-delay:.2s; }

 & .gsp-product-tab[aria-pressed=true], & .gsp-still:has(#production-vessel:checked) label[for=production-vessel], & .gsp-still:has(#production-speaker:checked) label[for=production-speaker], & .gsp-still:has(#production-lamp:checked) label[for=production-lamp] { color:var(--gsp-ink); background:transparent; }
 & .gsp-product-tab:hover { color:var(--gsp-ink); }
 & .gsp-extension { color:var(--gsp-muted); }
 & .gsp-image-well { position:relative; width:100%; aspect-ratio:4/3; border-radius:var(--gi-control-radius,6px); overflow:hidden; background:var(--gi-surface-inset,#f0f0f2); }
 & .gsp-image { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .4s ease,transform .6s cubic-bezier(.25,.8,.25,1); }
 & .gsp-image[data-active] { opacity:1; }
 & .gsp-image-well[data-direction=detail] img, & .gsp-still:has(select option[value=detail]:checked) .gsp-image { transform:scale(1.3); }
 & .gsp-workspace .gsp-product-column .gsp-image-well[data-view=detail] .gsp-image { transform:scale(1.8); }
 & .gsp-image-caption { position:absolute; right:6px; bottom:6px; padding:2px 5px; border-radius:3px; background:rgb(255 255 255 / .86); color:var(--gsp-muted); font:10px/14px var(--gi-font,Inter,sans-serif); }
 & .gsp-product-column[data-product=lamp] .gsp-image { transform-origin:50% 30%; }
 & .gsp-playback { display:block; margin:0 32px 0 auto; min-height:36px; padding:8px 0; border:0; border-radius:2px; background:transparent; color:var(--gsp-muted); font:12px/18px var(--gi-font,Inter,sans-serif); cursor:pointer; }
 & .gsp-playback:disabled { cursor:default; opacity:.65; }
 & .gsp-playback:hover { color:var(--gsp-ink); }
 & .gsp-still { position:relative; aspect-ratio:1120/416; overflow:hidden; }
 /* Match Stage's fixed design plane: controls and connectors scale together. */
 & .gsp-still .gsp-workspace { inset:auto; top:0; left:0; width:1120px; height:416px; transform-origin:top left; transform:scale(calc(100cqw / 1120px)); }
 & .gsp-still input[type=radio] { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
 & .gsp-fallback-finishes { padding:0; border:0; margin:8px 0 0; display:flex; gap:9px; }
 & .gsp-still .gsp-image[data-image-finish=ink] { opacity:1; }
 & .gsp-still:has(#production-finish-chalk:checked) .gsp-image[data-image-finish=ink] { opacity:0; }
 & .gsp-still:has(#production-finish-chalk:checked) .gsp-image[data-image-finish=chalk] { opacity:1; }
 &.gsp-enhanced > .gsp-still { display:none; }
}
.home-production-flow .gsp [data-layout=compact] .gsp-connections-wide { display:none; }
.home-production-flow .gsp [data-layout=compact] .gsp-connections-compact { display:block; }
.home-production-flow .gsp [data-layout=compact] .gsp-template { top:16px; left:16px; width:calc(100% - 32px); height:184px; padding:18px; }
.home-production-flow .gsp [data-layout=compact] .gsp-eyebrow { font-size:11px; }
.home-production-flow .gsp [data-layout=compact] .gsp-template-title { margin-top:5px; font-size:15px; }
.home-production-flow .gsp [data-layout=compact] .gsp-template-settings { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:20px; }
.home-production-flow .gsp [data-layout=compact] .gsp-setting + .gsp-setting { margin-top:0; }
.home-production-flow .gsp [data-layout=compact] .gsp-light-setting { display:none; }
.home-production-flow .gsp [data-layout=compact] .gsp-template-foot { margin-top:16px; padding-top:12px; font-size:11px; }
.home-production-flow .gsp [data-layout=compact] .gsp-select { padding:0 7px; gap:5px; }
.home-production-flow .gsp [data-layout=compact] .gsp-select > svg:first-child { display:none; }
.home-production-flow .gsp [data-layout=compact] .gsp-select select { font-size:11px; }
.home-production-flow .gsp [data-layout=compact] .gsp-finishes { gap:5px; }
.home-production-flow .gsp [data-layout=compact] .gsp-finishes button, .home-production-flow .gsp [data-layout=compact] .gsp-fallback-finishes label { gap:5px; padding:4px 2px; font-size:11px; }
.home-production-flow .gsp [data-layout=compact] .gsp-output-matrix { left:32px; right:16px; top:252px; bottom:14px; gap:24px; }
.home-production-flow .gsp [data-layout=compact] .gsp-product-column { grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:24px 74px; gap:12px 8px; padding:0; }
.home-production-flow .gsp [data-layout=compact] .gsp-product-tab { grid-column:1 / -1; grid-row:1; justify-self:start; width:auto; min-height:24px; flex-direction:row; gap:6px; padding:0 7px; font-size:11px; line-height:16px; border-color:transparent; box-shadow:none; background:transparent; }
.home-production-flow .gsp [data-layout=compact] .gsp-product-tab svg { width:18px; height:18px; }
.home-production-flow .gsp [data-layout=compact] .gsp-extension { display:none; }
.home-production-flow .gsp [data-layout=compact] .gsp-column-headings, .home-production-flow .gsp [data-layout=compact] .gsp-model-detail, .home-production-flow .gsp [data-layout=compact] .gsp-product-column::after { display:none; }
.home-production-flow .gsp [data-layout=compact] .gsp-template > .gsp-eyebrow { display:block; }
.home-production-flow .gsp [data-layout=compact] .gsp-product-tab { display:flex; }
.home-production-flow .gsp [data-layout=compact] .gsp-product-column > .gsp-image-well[data-view=full] { grid-column:1; grid-row:2; }
.home-production-flow .gsp [data-layout=compact] .gsp-product-column > .gsp-image-well[data-view=alternate] { grid-column:2; grid-row:2; }
.home-production-flow .gsp [data-layout=compact] .gsp-product-column > .gsp-image-well[data-view=detail] { grid-column:3; grid-row:2; }
@container (max-width:759px) {
 .home-production-flow .gsp-still { aspect-ratio:358/638; }
 .home-production-flow .gsp-still .gsp-workspace { width:358px; height:638px; transform:scale(calc(100cqw / 358px)); }
 .home-production-flow .gsp-still .gsp-connections-wide { display:none; }
 .home-production-flow .gsp-still .gsp-connections-compact { display:block; }
 .home-production-flow .gsp-still .gsp-template { top:16px; left:16px; width:calc(100% - 32px); height:184px; padding:18px; }
 .home-production-flow .gsp-still .gsp-eyebrow { font-size:11px; }
 .home-production-flow .gsp-still .gsp-template-title { margin-top:5px; font-size:15px; }
 .home-production-flow .gsp-still .gsp-template-settings { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:20px; }
 .home-production-flow .gsp-still .gsp-setting + .gsp-setting { margin-top:0; }
 .home-production-flow .gsp-still .gsp-light-setting { display:none; }
 .home-production-flow .gsp-still .gsp-template-foot { margin-top:16px; padding-top:12px; font-size:11px; }
 .home-production-flow .gsp-still .gsp-select { padding:0 7px; gap:5px; }
 .home-production-flow .gsp-still .gsp-select > svg:first-child { display:none; }
 .home-production-flow .gsp-still .gsp-select select { font-size:11px; }
 .home-production-flow .gsp-still .gsp-finishes { gap:5px; }
 .home-production-flow .gsp-still .gsp-finishes button, .home-production-flow .gsp-still .gsp-fallback-finishes label { gap:5px; padding:4px 2px; font-size:11px; }
 .home-production-flow .gsp-still .gsp-output-matrix { left:32px; right:16px; top:252px; bottom:14px; gap:24px; }
 .home-production-flow .gsp-still .gsp-product-column { grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:24px 74px; gap:12px 8px; padding:0; }
 .home-production-flow .gsp-still .gsp-product-tab { grid-column:1 / -1; grid-row:1; justify-self:start; width:auto; min-height:24px; flex-direction:row; gap:6px; padding:0 7px; font-size:11px; line-height:16px; border-color:transparent; box-shadow:none; background:transparent; }
 .home-production-flow .gsp-still .gsp-product-tab svg { width:18px; height:18px; }
 .home-production-flow .gsp-still .gsp-extension { display:none; }
.home-production-flow .gsp-still .gsp-column-headings, .home-production-flow .gsp-still .gsp-model-detail, .home-production-flow .gsp-still .gsp-product-column::after { display:none; }
.home-production-flow .gsp-still .gsp-template > .gsp-eyebrow { display:block; }
.home-production-flow .gsp-still .gsp-product-tab { display:flex; }
 .home-production-flow .gsp-still .gsp-product-column > .gsp-image-well[data-view=full] { grid-column:1; grid-row:2; }
 .home-production-flow .gsp-still .gsp-product-column > .gsp-image-well[data-view=alternate] { grid-column:2; grid-row:2; }
 .home-production-flow .gsp-still .gsp-product-column > .gsp-image-well[data-view=detail] { grid-column:3; grid-row:2; }
}
@media(max-width:700px) { :is(.studio-page, .approach-page) #repeat-production .home-production-flow { margin-top:28px; } }
@media(prefers-reduced-motion:reduce) { .home-production-flow .gsp-image, .home-production-flow .gsp-product-column .gsp-image-well { transition:none; } .home-production-flow .gsp-route-signal { display:none; } .home-production-flow .gsp-product-column[data-resolving] .gsp-image-well { animation:none; } }
@media (min-width:600px) and (max-width:999px) { :is(.studio-page, .approach-page) #repeat-production .home-production-flow { max-width:480px; } }

/* Older container-query engines can derive the same length ratio via trig. */
@supports not (transform:scale(calc(100cqw / 1120px))) {
 .home-production-flow .gsp-still .gsp-workspace { transform:scale(tan(atan2(100cqw,1120px))); }
 @container (max-width:759px) {
  .home-production-flow .gsp-still .gsp-workspace { transform:scale(tan(atan2(100cqw,358px))); }
 }
}

@keyframes gsp-route-travel { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
@keyframes gsp-output-settle { from { opacity:.55; transform:translateX(10px); } to { opacity:1; transform:translateX(0); } }