#cts-storyboard .cts-photo-prompt { position:absolute; z-index:4; left:12px; top:10px; padding:8px 10px; max-width:calc(100% - 24px); background:#07101de8; border:1px solid #2ee8f44d; border-radius:4px; color:#e3fbff; font-size:11px; line-height:1.5; pointer-events:none; }
#cts-storyboard .cts-photo-has-next .cts-photo-prompt { max-width:calc(50% - 20px); }
#cts-storyboard .cts-photo-interactive .cts-photo-next { top:10px; right:12px; bottom:auto; max-width:calc(50% - 20px); min-height:40px; padding:9px 12px; font-size:11px; }
#cts-storyboard .cts-photo-region { pointer-events:all; cursor:pointer; fill:var(--component-colour); fill-opacity:.035; stroke:var(--component-colour); stroke-opacity:.4; stroke-width:1; vector-effect:non-scaling-stroke; transition:fill-opacity .15s,stroke-opacity .15s; }
#cts-storyboard .cts-photo-region:is(.is-hovered,.is-selected) { fill-opacity:.2; stroke-opacity:1; stroke-width:1.5; filter:drop-shadow(0 0 4px color-mix(in srgb,var(--component-colour) 45%,transparent)); }
#cts-storyboard .cts-photo-callouts { position:absolute; z-index:4; bottom:10px; left:12px; right:12px; max-width:560px; margin-inline:auto; display:grid; grid-template-columns:repeat(var(--component-count),minmax(0,1fr)); gap:6px; pointer-events:none; }
#cts-storyboard .cts-photo-callouts button { pointer-events:auto; min-width:0; min-height:44px; padding:8px; display:flex; align-items:center; justify-content:center; gap:6px; border:1px solid color-mix(in srgb,var(--component-colour) 65%,#223449); background:#07101def; color:#edf4ff; border-radius:5px; font-size:12px; line-height:1.3; }
#cts-storyboard .cts-photo-callouts button:only-child { width:100%; max-width:220px; justify-self:center; }
#cts-storyboard .cts-photo-callouts button { overflow-wrap:anywhere; }
#cts-storyboard .cts-photo-callouts button:is(:hover,.is-hovered,.is-selected) { background:#112438f5; border-color:var(--component-colour); box-shadow:0 0 12px color-mix(in srgb,var(--component-colour) 20%,transparent); }
#cts-storyboard .cts-photo-component-dot { flex:none; width:5px; height:5px; border-radius:50%; background:var(--component-colour); }
#cts-storyboard .cts-photo-callouts button>span:last-child { color:var(--component-colour); }
#cts-storyboard .cts-photo-leaders { display:block; position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:3; }
#cts-storyboard .cts-photo-leader { opacity:.5; }
#cts-storyboard .cts-photo-leader:is(.is-hovered,.is-selected) { opacity:1; }
#cts-storyboard .cts-photo-leader path { fill:none; stroke:var(--component-colour); stroke-width:1; }
#cts-storyboard .cts-photo-leader circle { fill:var(--component-colour); stroke:#07101d; stroke-width:1; }
#cts-storyboard .cts-photo-picker { width:min(380px,calc(100vw - 32px)); max-height:calc(100dvh - 40px); overflow-y:auto; box-sizing:border-box; padding:22px; border:1px solid #2ee8f480; border-radius:12px; background:#0c1422; color:#edf4ff; box-shadow:0 20px 80px #0009; }
#cts-storyboard .cts-photo-picker::backdrop { background:#03081099; backdrop-filter:blur(2px); }
#cts-storyboard .cts-photo-picker-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
#cts-storyboard .cts-photo-picker h2 { font-size:22px; line-height:1.3; margin:2px 0 14px; }
#cts-storyboard .cts-photo-picker-heading button { flex:none; min-width:40px; min-height:40px; padding:4px; border:1px solid #344963; font-size:23px; line-height:1; margin-top:-4px; }
#cts-storyboard .cts-photo-picker>p { color:#a1b1c8; font-size:13px; line-height:1.7; margin:0 0 20px; }
#cts-storyboard .cts-photo-picker-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
#cts-storyboard .cts-photo-picker-options button { min-height:64px; padding:12px; display:grid; grid-template-columns:1fr auto; gap:5px; text-align:left; border:1px solid #304660; border-left:3px solid var(--resource-colour); background:#101d2e; }
#cts-storyboard .cts-photo-picker-options b { font-size:23px; color:var(--resource-colour); font-weight:500; }
#cts-storyboard .cts-photo-picker-options button>span:first-of-type { grid-row:2; font-size:12px; }
#cts-storyboard .cts-photo-picker-options button>span:last-child { grid-column:2; grid-row:1 / 3; align-self:center; color:var(--resource-colour); }
@media(max-width:540px) {
  #cts-storyboard .cts-photo-callouts { left:8px; right:8px; bottom:8px; gap:4px; }
  #cts-storyboard .cts-photo-callouts button { padding:7px 3px; gap:3px; font-size:10px; }
  #cts-storyboard .cts-photo-component-dot { width:4px; height:4px; }
  #cts-storyboard .cts-photo-prompt { left:8px; top:8px; font-size:10px; padding:7px 8px; }
  #cts-storyboard .cts-photo-interactive .cts-photo-next { right:8px; top:8px; padding:7px 8px; font-size:10px; }
  #cts-storyboard .cts-photo-next span { margin-left:5px; }
  #cts-storyboard .cts-photo-picker { padding:18px; }
}
#cts-storyboard .cts-quantity-tile { fill:var(--tile-colour); fill-opacity:.3; stroke:var(--tile-colour); stroke-opacity:.7; stroke-width:.6px; stroke-linejoin:round; vector-effect:non-scaling-stroke; shape-rendering:geometricPrecision; }
#cts-storyboard .cts-quantity-tile.is-muted { fill-opacity:.2; stroke-opacity:.5; }
#cts-storyboard .cts-quantity-tile.is-other { fill:#8b9db9; stroke:#c1d1e8; stroke-opacity:.5; }
#cts-storyboard .cts-quantity-tile.is-selected { fill-opacity:.56; stroke-opacity:1; stroke-width:.85px; }
#cts-storyboard .cts-quantity-tile[data-pick]:hover { fill-opacity:.72; stroke:#fff; stroke-opacity:1; stroke-width:1px; }
#cts-storyboard .cts-other-picker { width:min(520px,calc(100vw - 32px)); }
#cts-storyboard .cts-other-picker .cts-other-share { color:#b4ccff; font-size:14px; margin-bottom:12px; }
#cts-storyboard .cts-other-picker dl { margin:16px 0; }
#cts-storyboard .cts-other-picker dl>div { padding:10px 0; border-top:1px solid #26354a; }
#cts-storyboard .cts-other-picker dt { color:#edf4ff; font-size:13px; font-weight:600; }
#cts-storyboard .cts-other-picker dd { margin:4px 0 0; color:#b7c7dd; font-size:13px; line-height:1.65; }
#cts-storyboard .cts-other-sources { display:flex; flex-wrap:wrap; gap:8px 18px; font-size:12px; line-height:1.6; }

/* Controls have their own layout area and never cover the photograph. */
#cts-storyboard .cts-photo-controls { flex:none; padding:14px clamp(16px,3vw,32px); border-top:1px solid var(--cts-line); background:#0a1421; }
#cts-storyboard .cts-photo-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
#cts-storyboard #cts-photo-prompt { position:static; margin:0; padding:0; max-width:none; background:none; border:0; color:#bdcee1; font-size:13px; line-height:1.5; }
#cts-storyboard #cts-photo-next { position:static; inset:auto; flex:none; min-height:48px; max-width:100%; margin-left:auto; padding:12px 18px; font-size:13px; background:#102c3c; border:1px solid var(--cts-cyan); color:var(--cts-cyan); box-shadow:none; }
#cts-storyboard #cts-photo-next>span { margin-left:14px; }
#cts-storyboard #cts-photo-callouts { position:static; width:100%; max-width:none; margin:12px 0 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr)); gap:10px; pointer-events:auto; }
#cts-storyboard #cts-photo-callouts button { min-height:48px; padding:12px; font-size:13px; }
#cts-storyboard #cts-photo-callouts button:only-child { max-width:none; }
#cts-storyboard #cts-photo-label { position:static; max-width:none; margin:12px 0 0; padding:8px 12px; color:#edf4ff; font-size:13px; background:#111d30; }
#cts-storyboard .cts-photo-source-layer { position:absolute; pointer-events:none; max-width:none; }
#cts-storyboard #cts-photo { z-index:0; }
#cts-storyboard #cts-car-shadow { z-index:1; }
#cts-storyboard #cts-photo-overlay { z-index:2; }
#cts-storyboard .cts-car-lift { z-index:4; transform-origin:50% 60%; will-change:transform,opacity; }
#cts-storyboard .cts-photo-picker-heading { position:sticky; top:0; z-index:2; background:#0c1422; padding:6px 0; }
@media (max-width:540px) {
 #cts-storyboard .cts-photo-toolbar { align-items:stretch; }
 #cts-storyboard #cts-photo-next { width:100%; margin:0; }
 #cts-storyboard #cts-photo-prompt { flex-basis:100%; }
 #cts-storyboard #cts-photo-callouts { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
 #cts-storyboard #cts-photo-callouts button { padding:10px 8px; font-size:12px; }
 #cts-storyboard #cts-photo-callouts button:last-child:nth-child(odd) { grid-column:1 / -1; }
}
#cts-storyboard :is(button,select) { min-height:44px!important; }
@media (pointer:coarse) {
 #cts-storyboard select { font-size:16px; }
}
@media (max-width:1024px) {
 #cts-storyboard select { font-size:16px; }
 #cts-storyboard .cts-photo-picker { max-height:calc(100dvh - 24px); max-width:calc(100vw - 24px); }
 #cts-storyboard .cts-photo-picker-heading { gap:8px; }
}
#cts-storyboard .cts-header { padding-top:max(10px,env(safe-area-inset-top)); }
#cts-storyboard .cts-footer { padding-bottom:max(12px,env(safe-area-inset-bottom)); }
#cts-storyboard .cts-company-title>* { min-width:0; overflow-wrap:anywhere; }