/* Source-specific stories: connected systems, and a product growing from one image. */
.source-entry-chips { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.source-entry-chips > span { padding:5px 9px; border:1px solid #dae5f5; border-radius:20px; color:#47628c; background:#f5f8ff; font-size:9px; white-space:nowrap; }
.source-entry-chips > i { color:#94a8c5; font-style:normal; }
.api-entry-story { margin:17px 0 20px; }
.api-entry-systems { display:grid; grid-template-columns:1fr 22px 1fr 22px 1fr; align-items:center; gap:5px; }
.api-entry-systems > span { display:flex; align-items:center; flex-direction:column; gap:7px; min-width:0; padding:17px 5px; border:1px solid #e0e8f3; border-radius:15px; background:linear-gradient(160deg,#fff,#f6f9ff); }
.api-entry-systems > span:nth-of-type(2) { border-color:#bbd3f9; background:linear-gradient(160deg,#eef4ff,#edfbfd); box-shadow:0 8px 26px #315fcd0b; }
.api-entry-systems > span > i { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; color:#376ae4; background:#eaf1ff; font-size:21px; font-style:normal; }
.api-entry-systems strong { color:#233859; font-size:11px; }
.api-entry-systems small { color:#7a8ca6; font-size:8px; text-align:center; }
.api-entry-systems > b { color:#7397d7; font-size:19px; font-weight:400; text-align:center; }
.api-entry-story p { margin:13px 0; color:#73829a; font-size:11px; line-height:1.8; }
.image-seed-entry { display:grid; grid-template-columns:155px 1fr; align-items:center; gap:25px; margin:16px 0 21px; padding:20px; border:1px solid #e1e9f5; border-radius:19px; background:radial-gradient(ellipse at 14% 30%,#e5f3fc,transparent 70%),#f7faff; }
.image-seed-entry figure { position:relative; width:100%; margin:0; border:6px solid white; border-radius:13px; overflow:hidden; transform:rotate(-5deg); box-shadow:0 12px 30px #18396019; }
.image-seed-entry figure img { display:block; width:100%; aspect-ratio:4/5; object-fit:cover; }
.image-seed-entry figcaption { position:absolute; left:7px; bottom:7px; padding:5px 7px; border-radius:6px; color:white; background:#203344c9; font-size:8px; }
.image-seed-entry > div > small { color:#376cdf; font-size:9px; }
.image-seed-entry h3 { margin:9px 0; color:#223857; font-size:clamp(17px,1.65vw,23px); font-weight:600; line-height:1.4; letter-spacing:-.03em; }
.image-seed-entry p { margin:0 0 14px; color:#7a8ba3; font-size:10px; line-height:1.75; }

.product-processing:is([data-processing-method="api"],[data-processing-method="image"]) { gap:9px; padding:17px 22px 12px; overflow-y:auto; overscroll-behavior:contain; }
.product-processing:is([data-processing-method="api"],[data-processing-method="image"]) .processing-story-head { flex:0 0 auto; background:transparent; gap:12px; }
.product-processing:is([data-processing-method="api"],[data-processing-method="image"]) .processing-story-head strong { font-size:clamp(13px,1.2vw,17px); line-height:1.45; }
.product-processing:is([data-processing-method="api"],[data-processing-method="image"]) .processing-theatre { flex:1 0 248px; min-height:248px; background:radial-gradient(ellipse at 80% 12%,#e9f7fd,transparent 58%),linear-gradient(140deg,#f3f7ff,#f9fbff); }
.source-scene { display:flex; flex-direction:column; justify-content:space-between; gap:12px; padding:17px 18px 12px; }
.source-scene i,.source-scene em { font-style:normal; }
.source-scene-eyebrow { display:flex; justify-content:space-between; align-items:center; flex:0 0 auto; gap:12px; }
.source-scene-eyebrow > span { color:#376ad4; font-size:10px; font-weight:650; letter-spacing:.06em; white-space:nowrap; }
.source-scene-eyebrow > small { color:#8291a8; font-size:8px; text-align:right; line-height:1.5; }
.source-scene-note { display:flex; align-items:center; justify-content:center; flex:0 0 auto; gap:7px; color:#7c8da5; font-size:8px; line-height:1.55; text-align:center; }
.source-scene-note > i { color:#4e8cca; font-size:12px; }
.api-association-grid { display:grid; grid-template-columns:1fr 68px 1fr; align-items:center; gap:10px; }
.source-system-card { display:flex; flex-direction:column; gap:10px; min-width:0; padding:16px 14px; border:1px solid #dce6f4; border-radius:13px; background:#ffffffef; box-shadow:0 7px 20px #37578506; }
.source-system-card > small { color:#7a8ba4; font-size:8px; }
.source-system-card > strong { min-height:16px; color:#253c5c; font-size:clamp(10px,1.05vw,14px); font-weight:650; overflow-wrap:anywhere; }
.source-system-card > span { display:flex; align-items:center; justify-content:space-between; gap:6px; padding-top:7px; border-top:1px solid #edf1f7; color:#5a7291; font-size:9px; }
.source-system-card > span b { color:#96a3b5; font-size:8px; font-weight:400; }
.source-system-card.is-market { border-color:#cbdff3; background:linear-gradient(150deg,#fff,#f2fbff); }
.source-system-card.is-market > span { color:#3276a3; }
.source-ai-link { display:flex; align-items:center; flex-direction:column; gap:9px; position:relative; }
.source-ai-link > span { display:grid; place-items:center; width:46px; height:46px; border:1px solid #bdd6fb; border-radius:15px; color:#3674e9; background:linear-gradient(145deg,#fff,#dfeeff); box-shadow:0 0 0 6px #e8f1fe9c,0 7px 20px #548df41a; font-size:27px; }
.source-ai-link > i { color:#5c92d9; font-size:21px; }
.source-ai-link > small { color:#7a94b6; font-size:8px; white-space:nowrap; }
.source-scene.is-active .source-ai-link > span { animation:source-core-breathe 2.8s ease-in-out infinite; }
.source-scene.is-active .source-system-card.is-market > span { animation:source-grow .65s both; animation-delay:.8s; }
.source-scene.is-active .source-system-card.is-market > span:nth-of-type(2) { animation-delay:1.5s; }
.source-scene.is-active .source-system-card.is-market > span:nth-of-type(3) { animation-delay:2.2s; }
.api-localize-grid { display:grid; grid-template-columns:1fr 43px 1fr; align-items:stretch; gap:9px; }
.source-expression { display:flex; flex-direction:column; justify-content:center; gap:11px; min-width:0; padding:20px 15px; border:1px solid #e0e7f1; border-radius:13px; background:#fff; }
.source-expression > small { color:#8a99ad; font-size:8px; }
.source-expression > strong { color:#344963; font-size:12px; line-height:1.55; }
.source-expression > p { margin:0; color:#7d8da3; font-size:10px; line-height:1.6; }
.source-expression > span { padding-top:10px; border-top:1px solid #e8eef7; color:#a0aabc; font-size:8px; line-height:1.5; }
.source-expression.is-market { border-color:#c7dafb; background:linear-gradient(155deg,#fff,#eef5ff); }
.source-expression.is-market > strong { color:#2f65c0; font-size:clamp(12px,1.3vw,18px); line-height:1.2; letter-spacing:-.03em; }
.source-expression.is-market > p { color:#476eab; }
.source-expression.is-market > span { color:#6994c5; }
.source-expression-arrow { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:#5f96e5; font-size:24px; }
.source-expression-arrow > i { font-size:20px; }
.source-scene.is-active .source-expression.is-market > :is(strong,p,span) { animation:source-grow .85s both; animation-delay:.55s; }
.source-scene.is-active .source-expression.is-market > p { animation-delay:1.3s; }
.source-scene.is-active .source-expression.is-market > span { animation-delay:2s; }
.api-instruction-prompt { display:flex; align-items:center; justify-content:center; gap:15px; padding:7px 0; }
.api-instruction-prompt > i { color:#537cde; font-size:25px; }
.api-instruction-prompt > span { color:#355075; font-size:clamp(12px,1.18vw,16px); line-height:1.65; letter-spacing:-.01em; }
.api-command-stack { display:grid; gap:6px; width:min(100%,420px); margin:0 auto; }
.api-command-stack > div { display:flex; align-items:center; gap:10px; padding:8px 11px; border:1px solid #dce6f4; border-radius:10px; background:#ffffffec; }
.api-command-stack > div > i { display:grid; place-items:center; flex:0 0 25px; height:25px; border:1px solid #d4e2f9; border-radius:8px; color:#5d85ce; background:#f3f7ff; font-size:8px; }
.api-command-stack > div > span { display:flex; flex:1; flex-direction:column; gap:3px; min-width:0; }
.api-command-stack strong { color:#405875; font-size:10px; font-weight:600; }
.api-command-stack small { color:#91a0b5; font-size:8px; }
.api-command-stack > div > b { padding:4px 6px; border-radius:5px; color:#6b95b5; background:#eef7fb; font-size:7px; font-weight:500; white-space:nowrap; }
.source-scene.is-active .api-command-stack > div { animation:source-grow .75s both; animation-delay:var(--arrive); }
.api-sync-network { display:grid; grid-template-columns:96px 1fr 96px; align-items:center; gap:17px; }
.api-sync-node { display:flex; align-items:center; flex-direction:column; gap:9px; padding:18px 4px; border:1px solid #dce5f3; border-radius:14px; background:#fff; }
.api-sync-node > i { display:grid; place-items:center; width:35px; height:35px; border-radius:10px; color:#5f7cad; background:#f0f4fc; font-size:24px; }
.api-sync-node > strong { color:#3f5574; font-size:11px; }
.api-sync-node > small { color:#899ab0; font-size:8px; }
.api-sync-node.is-market { border-color:#c6def4; background:#f6fcff; }
.api-sync-node.is-market > i { color:#3f96b5; background:#e4f5fb; }
.api-sync-lanes { display:flex; flex-direction:column; gap:12px; min-width:0; }
.api-sync-lanes > :is(.sync-out,.sync-back) { display:flex; position:relative; flex-direction:column; align-items:center; gap:9px; }
.api-sync-lanes b { font-size:9px; font-weight:500; }
.sync-out { color:#477ec5; }.sync-back { color:#4a9c99; }
.api-sync-lanes em { color:#8c9db5; font-size:8px; white-space:nowrap; }
.api-sync-lanes > span > i { display:block; position:relative; width:100%; height:1px; background:#ccddf4; }
.api-sync-lanes > span > i::after { position:absolute; top:-2px; left:0; width:22px; height:5px; border-radius:4px; background:#629de9; box-shadow:0 0 7px #70aff380; content:""; }
.api-sync-lanes > .sync-back > i { background:#c4e7e5; }.api-sync-lanes > .sync-back > i::after { background:#69b5af; }
.source-scene.is-active .sync-out > i::after { animation:source-sync-send 2.7s ease-in-out infinite; }
.source-scene.is-active .sync-back > i::after { animation:source-sync-send 2.7s ease-in-out 1.2s infinite reverse; }
.sync-core { display:flex; justify-content:center; align-items:center; gap:8px; color:#4c7bcd; font-size:19px; }.sync-core > b { color:#7c97bd; font-size:8px; }
.api-sync-receipt { display:flex; justify-content:center; gap:8px; }
.api-sync-receipt > span { display:flex; align-items:center; gap:9px; padding:6px 9px; border:1px solid #d7eae7; border-radius:7px; color:#78a29c; background:#f3fbf9; font-size:8px; }
.api-sync-receipt i { color:#43a68f; }
.source-scene.is-active .api-sync-receipt > span { animation:source-grow .65s 1.15s both; }.source-scene.is-active .api-sync-receipt > span:last-child { animation-delay:2.6s; }

.image-recognition-workspace { display:grid; grid-template-columns:155px 1fr; align-items:center; gap:33px; width:min(100%,390px); margin:0 auto; }
.image-original-card { position:relative; margin:0; overflow:hidden; border:5px solid white; border-radius:12px; box-shadow:0 10px 23px #365c7c13; transform:rotate(-4deg); }
.image-original-card > img { display:block; width:100%; height:165px; object-fit:cover; }
.image-original-card > figcaption { position:absolute; left:8px; bottom:7px; padding:4px 7px; border-radius:5px; color:white; background:#243a4acd; font-size:8px; }
.image-recognition-scan { position:absolute; top:0; left:0; right:0; height:28%; border-bottom:1px solid #6dfaff; background:linear-gradient(transparent,#83eaf545); }
.source-scene.is-active .image-recognition-scan { animation:source-image-scan 3s ease-in-out infinite; }
.image-recognition-tags { display:flex; flex-direction:column; gap:10px; }
.image-recognition-tags > span { display:flex; align-items:center; gap:9px; padding:10px; border:1px solid #dce9f4; border-radius:9px; color:#64839e; background:#ffffffed; font-size:10px; white-space:nowrap; }
.image-recognition-tags i { color:#5da9a7; }
.image-recognition-tags small { color:#9baabe; font-size:8px; line-height:1.7; }
.source-scene.is-active .image-recognition-tags > span { animation:source-grow .75s both; animation-delay:var(--arrive); }
.image-studio-origin { display:flex; align-items:center; justify-content:center; gap:10px; color:#6982a6; font-size:9px; }
.image-studio-origin > img { width:31px; height:37px; object-fit:cover; border:2px solid white; border-radius:6px; box-shadow:0 3px 8px #35547d13; transform:rotate(-6deg); }
.image-studio-origin > i { margin:0 7px; color:#5b8dda; font-size:21px; }.image-studio-origin > b { font-weight:500; }.image-studio-origin > em { color:#8faede; font-size:18px; }
.image-studio-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; width:min(100%,450px); margin:0 auto; }
.image-studio-grid > figure { position:relative; min-width:0; margin:0; padding:5px; border:1px solid #dde7f3; border-radius:12px; background:white; box-shadow:0 5px 18px #325e9310; transform-origin:50% 0; }
.image-studio-grid > figure > img,.image-turntable { display:block; position:relative; width:100%; height:126px; object-fit:contain; border-radius:8px; background:white; }
.image-studio-grid figcaption { display:flex; justify-content:space-between; align-items:center; gap:4px; margin:5px 3px 3px; padding-top:8px; border-top:1px solid #edf1f7; color:#627c9a; font-size:8px; }.image-studio-grid figcaption b { font-weight:500; }.image-studio-grid figcaption i { color:#56a994; }
.source-scene.is-active .image-studio-grid > figure { animation:source-material-grow .95s both; animation-delay:var(--arrive); }
.image-turntable { overflow:hidden; perspective:700px; }
.image-turntable > img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; }.image-turntable > img:first-child { opacity:1; }
.image-turntable > i { position:absolute; bottom:8px; left:15%; width:70%; height:13px; border:1px solid #d3e4f4; border-top-color:transparent; border-radius:50%; }
.image-turntable > span { position:absolute; right:3px; bottom:0; padding:2px 4px; border-radius:4px; color:#7897be; background:#edf5fe; font-size:7px; }
.source-scene.is-active .image-turntable > img { animation:source-turntable-frame 6s linear infinite; animation-delay:1.8s; }.source-scene.is-active .image-turntable > img:nth-child(2) { animation-delay:3.8s; }.source-scene.is-active .image-turntable > img:nth-child(3) { animation-delay:5.8s; }
.image-content-page { display:grid; grid-template-columns:145px 1fr; gap:20px; width:min(100%,450px); margin:0 auto; padding:12px; border:1px solid #dbe5f3; border-radius:13px; background:#fff; box-shadow:0 8px 24px #365a8d0b; }
.image-content-gallery { min-width:0; }.image-content-gallery > img { display:block; width:100%; height:144px; object-fit:contain; border:1px solid #edf2f8; border-radius:8px; }
.image-content-gallery > div { display:flex; align-items:center; gap:5px; margin-top:6px; }.image-content-gallery > div > :is(img,span) { width:30px; height:30px; object-fit:cover; border:1px solid #e4ecf6; border-radius:5px; }.image-content-gallery > div > span { display:grid; place-items:center; color:#97b3d6; background:#f5f9fe; font-size:17px; }
.image-content-copy { display:flex; flex-direction:column; justify-content:center; gap:11px; min-width:0; }.image-content-copy > div > small { display:block; margin-bottom:5px; color:#99a6b9; font-size:7px; }.image-content-copy strong { display:block; color:#304a6c; font-size:clamp(12px,1.35vw,18px); font-weight:600; letter-spacing:-.025em; line-height:1.2; }.image-content-copy p { margin:0; color:#68829f; font-size:10px; line-height:1.55; }.image-content-copy > div > span { display:inline-block; margin-right:4px; padding:4px 6px; border-radius:4px; color:#7e9dbc; background:#f0f6fc; font-size:7px; }.image-content-pending { color:#a19a87; font-size:7px; line-height:1.55; }.image-content-pending > i { margin-right:5px; }
.source-scene.is-active .image-content-copy > div { animation:source-grow .7s both; animation-delay:var(--arrive); }

.product-processing:is([data-processing-method="api"],[data-processing-method="image"]) .processing-sequence { flex:0 0 auto; }
.product-processing:is([data-processing-method="api"],[data-processing-method="image"]) .processing-sequence > span.is-active { color:#406f95; }.product-processing:is([data-processing-method="api"],[data-processing-method="image"]) .processing-sequence > span.is-active em { color:#499ab0; }
.processing-sequence[data-step-count="4"] { grid-template-columns:repeat(4,minmax(0,1fr)); }
.processing-sequence[data-step-count="4"] > span { grid-template-columns:19px 1fr; gap:5px; padding:6px; min-height:34px; }.processing-sequence[data-step-count="4"] em { display:none; }
.product-processing:is([data-processing-method="api"],[data-processing-method="image"]) .processing-meter { flex:0 0 auto; grid-template-columns:1fr; gap:7px; }.product-processing:is([data-processing-method="api"],[data-processing-method="image"]) .processing-meter small { color:#8695aa; font-size:8px; text-align:center; }
.processing-playback { position:sticky; bottom:-12px; z-index:8; display:flex; flex:0 0 auto; justify-content:space-between; align-items:center; gap:9px; padding:7px 0 1px; background:#f9fbfd; box-shadow:0 -7px 14px #f9fbfde8; }
.processing-playback[hidden] { display:none; }.processing-playback > span { color:#8a9ab0; font-size:9px; white-space:nowrap; }.processing-playback > div { display:flex; align-items:center; gap:6px; }.processing-playback button { min-height:31px; padding:0 10px; border:1px solid #dce6f4; border-radius:8px; color:#7a8fae; background:#fff; font-size:9px; cursor:pointer; transition:background .2s,border-color .2s,color .2s; }.processing-playback button:hover { color:#376ad4; border-color:#bacef0; background:#edf4ff; }.processing-playback button:focus-visible { outline:2px solid #6a9df1; outline-offset:3px; }.processing-playback button:last-child { color:#3e71d6; border-color:#c8dafa; background:#eaf2ff; }.processing-playback button:last-child:hover { background:#dfebff; }.processing-playback button:disabled { opacity:.38; cursor:default; background:#f8fafd; }.processing-playback button i { margin-left:6px; font-style:normal; }
.product-processing.is-paused *, .product-processing.is-paused *::before, .product-processing.is-paused *::after { animation-play-state:paused!important; }
.product-processing.is-snapshot .source-scene *, .product-processing.is-snapshot .source-scene *::before, .product-processing.is-snapshot .source-scene *::after { animation:none!important; }
.product-stage [hidden] { display:none!important; }
.product-draft-view.is-image-draft { display:flex; flex-direction:column; overflow-y:auto; padding:22px; }.product-draft-view.is-image-draft > * { flex-shrink:0; }.product-draft-view.is-image-draft .draft-actions { position:sticky; bottom:-22px; z-index:5; margin-top:auto; padding:11px 0 1px; background:#f9fbfd; box-shadow:0 -8px 14px #f9fbfde8; }
.product-draft-view.is-image-draft > header { gap:12px; }.product-draft-view.is-image-draft > header > div { min-width:0; }.product-draft-view.is-image-draft > header > span { flex-shrink:0; white-space:nowrap; }
.product-draft-view.is-image-draft .draft-product-grid { grid-template-columns:1fr; margin-top:14px; }.product-draft-view.is-image-draft .draft-product-grid > article:not([hidden]) { display:grid; grid-template-columns:100px 1fr; align-items:center; gap:15px; }.product-draft-view.is-image-draft .draft-art { height:112px; background:white; }.product-draft-view.is-image-draft .draft-art img { object-fit:contain; }.product-draft-view.is-image-draft .draft-product-grid article > span { margin:0; gap:9px; }.product-draft-view.is-image-draft .draft-product-grid article strong { font-size:16px; }
.image-draft-deliverables { margin:13px 0; }.image-draft-deliverables > div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }.image-draft-deliverables > div > span { display:flex; align-items:center; gap:7px; padding:5px 8px; border:1px solid #e0e8f3; border-radius:9px; background:#f8fbff; }.image-draft-deliverables img { width:35px; height:42px; object-fit:contain; border-radius:5px; background:white; }.image-draft-deliverables b { color:#7790b0; font-size:8px; font-weight:500; }.image-draft-deliverables p { margin:9px 0 0; color:#96a3b5; font-size:8px; line-height:1.7; }

/* A SKU owns its entire image set; the selected color follows it into the draft. */
.image-sku-scene { gap:8px; }
.image-sku-workspace { display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:22px; width:min(100%,475px); margin:auto; }
.image-sku-scene.is-active[data-selected-sku="MT-PACK-GR"] .image-sku-gallery { animation:sku-graphite-arrive .5s both; }.image-sku-scene.is-active[data-selected-sku="MT-PACK-OC"] .image-sku-gallery { animation:sku-ocean-arrive .5s both; }.image-sku-scene.is-active[data-selected-sku="MT-PACK-SA"] .image-sku-gallery { animation:sku-sand-arrive .5s both; }
.product-processing.is-paused .image-sku-gallery { animation:none!important; }
.image-sku-gallery { display:grid; grid-template-columns:minmax(0,1fr) 43px; align-items:stretch; gap:7px; min-width:0; }
.image-sku-gallery > figure { min-width:0; margin:0; padding:5px; border:1px solid #dce6f2; border-radius:12px; background:white; box-shadow:0 7px 19px #36557d0d; }
.image-sku-gallery > figure > img { display:block; width:100%; height:139px; object-fit:contain; }
.image-sku-gallery figcaption { display:flex; justify-content:space-between; align-items:center; gap:5px; margin:2px; padding:7px 2px 2px; border-top:1px solid #edf1f7; color:#6683a1; font-size:8px; }
.image-sku-gallery figcaption > b { color:#a1aec1; font-size:6px; font-weight:400; }
.image-sku-angle-pair { display:flex; flex-direction:column; justify-content:space-between; gap:7px; }
.image-sku-angle-pair > span { display:flex; flex-direction:column; align-items:center; padding:4px 2px; border:1px solid #e0e8f3; border-radius:8px; background:white; }
.image-sku-angle-pair img { width:100%; height:58px; object-fit:contain; }.image-sku-angle-pair small { color:#9caabd; font-size:6px; }
.image-sku-details { display:flex; flex-direction:column; gap:10px; min-width:0; }
.image-sku-details > small { color:#8ca0ba; font-size:8px; }.image-sku-details > strong { color:#375879; font-size:18px; font-weight:550; line-height:1.3; letter-spacing:-.035em; }
.image-sku-picker { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
.image-sku-picker > button { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; min-width:0; padding:7px 3px; border:1px solid #dce6f4; border-radius:8px; color:#7c90ac; background:#fff; cursor:pointer; transition:border-color .2s,background .2s,box-shadow .2s; }
.image-sku-picker > button > i { display:block; width:17px; height:17px; border:2px solid white; border-radius:50%; background:var(--sku-color); box-shadow:0 0 0 1px #dce3ed; }
.image-sku-picker > button > span { font-size:8px; line-height:1; white-space:nowrap; }.image-sku-picker > button > b { position:absolute; top:4px; right:5px; opacity:0; color:#4b80d0; font-size:7px; }
.image-sku-picker > button:hover { color:#5478a9; border-color:#b4ccef; background:#f7faff; }.image-sku-picker > button.is-selected { color:#416fae; border-color:#81a7e6; background:#f0f6ff; box-shadow:inset 0 0 0 1px #afc8ee40; }.image-sku-picker > button.is-selected > b { opacity:1; }.image-sku-picker > button:focus-visible { outline:2px solid #6e9cdf; outline-offset:3px; }
.image-sku-code { display:flex; align-items:center; flex-wrap:wrap; gap:5px 10px; color:#9baabd; font-size:7px; }.image-sku-code > b { color:#6482a7; font:500 8px ui-monospace,SFMono-Regular,Menlo,monospace; }
.image-sku-details > p { margin:0; color:#95a4b9; font-size:7px; line-height:1.5; }
.image-content-variant { display:flex; align-items:center; gap:4px; margin-top:6px; color:#8ea1b8; font-size:7px; white-space:nowrap; }.image-content-variant > i { display:block; width:6px; height:6px; border-radius:50%; background:var(--selected-sku-color,#35434b); }
.image-draft-variants { margin:10px 0 0; }.image-draft-variants > header { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 7px; }.image-draft-variants > header > span { color:#8a9db6; font-size:8px; }.image-draft-variants > header > b { color:#7a94b4; font:500 8px ui-monospace,SFMono-Regular,Menlo,monospace; }
.image-sku-picker--draft > button { flex-direction:row; min-height:33px; gap:9px; padding:6px; }.image-sku-picker--draft > button > b { position:static; }.image-sku-picker--draft > button > i { width:15px; height:15px; }
.product-draft-view.is-image-draft .image-draft-deliverables { margin:10px 0; }.product-draft-view.is-image-draft .draft-summary { margin-block:9px; }

@keyframes source-grow { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:translateY(0); } }
@keyframes sku-graphite-arrive { from { opacity:.4; transform:translateX(4px); } to { opacity:1; transform:none; } }
@keyframes sku-ocean-arrive { from { opacity:.4; transform:translateX(4px); } to { opacity:1; transform:none; } }
@keyframes sku-sand-arrive { from { opacity:.4; transform:translateX(4px); } to { opacity:1; transform:none; } }
@keyframes source-material-grow { from { opacity:0; transform:translateY(-13px) scale(.88); } to { opacity:1; transform:none; } }
@keyframes source-core-breathe { 0%,100% { box-shadow:0 0 0 6px #e8f1fe9c,0 7px 20px #548df41a; } 50% { box-shadow:0 0 0 10px #e8f1fe50,0 7px 24px #548df438; } }
@keyframes source-sync-send { 0% { left:0; opacity:0; } 15%,75% { opacity:1; } 100% { left:calc(100% - 22px); opacity:0; } }
@keyframes source-image-scan { 0%,100% { top:0; opacity:0; } 15%,85% { opacity:1; } 50% { top:70%; } }
@keyframes source-turntable-frame { 0%,26% { opacity:1; transform:perspective(700px) rotateY(0); } 33% { opacity:0; transform:perspective(700px) rotateY(-25deg); } 90% { opacity:0; transform:perspective(700px) rotateY(25deg); } 100% { opacity:1; transform:perspective(700px) rotateY(0); } }

@media (min-width:901px) and (max-height:760px) {
  .image-sku-workspace { gap:17px; }.image-sku-gallery > figure > img { height:123px; }.image-sku-angle-pair img { height:50px; }.image-sku-details { gap:7px; }.image-sku-details > strong { font-size:16px; }.image-sku-picker > button { padding:6px 3px; gap:5px; }
  .product-processing:is([data-processing-method="api"],[data-processing-method="image"]) { gap:7px; padding:12px 18px 10px; }
  .product-processing:is([data-processing-method="api"],[data-processing-method="image"]) .processing-theatre { flex-basis:235px; min-height:235px; }
  .source-scene { gap:8px; padding:12px 15px 10px; }.source-system-card { gap:7px; padding:12px; }.source-system-card > span { padding-top:5px; }.source-expression { gap:8px; padding:15px 12px; }.api-instruction-prompt { padding:0; }.api-instruction-prompt > span { font-size:12px; }.api-command-stack > div { padding:6px 10px; }.api-sync-network { gap:11px; }.api-sync-lanes { gap:8px; }.image-original-card > img { height:145px; }.image-recognition-workspace { grid-template-columns:135px 1fr; }.image-studio-grid > figure > img,.image-turntable { height:108px; }.image-content-gallery > img { height:120px; }.image-content-copy { gap:7px; }.image-content-page { grid-template-columns:125px 1fr; padding:9px; }.image-content-copy strong { font-size:14px; }.processing-playback { bottom:-10px; padding-top:5px; }
}
@media (max-width:600px) {
  .image-sku-workspace { grid-template-columns:1fr 1fr; gap:12px; }.image-sku-gallery { grid-template-columns:1fr; gap:5px; }.image-sku-gallery > figure { padding:3px; }.image-sku-gallery > figure > img { height:123px; }.image-sku-gallery figcaption { font-size:7px; padding-top:5px; }.image-sku-gallery figcaption > b { display:none; }.image-sku-angle-pair { flex-direction:row; gap:5px; }.image-sku-angle-pair > span { flex:1; min-width:0; padding:2px; }.image-sku-angle-pair img { height:40px; }.image-sku-angle-pair small { font-size:5px; }.image-sku-details { gap:11px; }.image-sku-details > small { font-size:6px; }.image-sku-details > strong { font-size:15px; }.image-sku-picker { gap:4px; }.image-sku-picker > button { padding:7px 2px; gap:7px; }.image-sku-picker > button > span { font-size:6px; }.image-sku-picker > button > i { width:15px; height:15px; }.image-sku-picker > button > b { top:3px; right:3px; font-size:5px; }.image-sku-code { gap:5px; font-size:6px; }.image-sku-code > b { font-size:7px; }.image-sku-details > p { font-size:6px; }.image-sku-picker--draft > button { min-height:36px; gap:6px; }.image-sku-picker--draft > button > span { font-size:8px; }.image-content-variant { font-size:6px; gap:3px; }
  .image-seed-entry { grid-template-columns:116px 1fr; gap:17px; padding:15px; }.image-seed-entry h3 { font-size:18px; }.image-seed-entry p { font-size:9px; }
  .product-processing:is([data-processing-method="api"],[data-processing-method="image"]) { padding:15px 12px 12px; gap:10px; }
  .product-processing:is([data-processing-method="api"],[data-processing-method="image"]) .processing-theatre { min-height:300px; flex-basis:300px; }
  .source-scene { padding:14px 11px 12px; gap:13px; }.source-scene-eyebrow { align-items:flex-start; gap:8px; }.source-scene-eyebrow small { max-width:155px; font-size:8px; }
  .api-association-grid { grid-template-columns:1fr 37px 1fr; gap:5px; }.source-system-card { padding:13px 9px; gap:12px; }.source-system-card > strong { min-height:29px; font-size:11px; }.source-system-card > span { flex-direction:column; align-items:flex-start; gap:4px; font-size:9px; }.source-ai-link > span { width:31px; height:31px; border-radius:10px; font-size:20px; }.source-ai-link > small { font-size:6px; }.source-ai-link { gap:12px; }
  .api-localize-grid { grid-template-columns:1fr 24px 1fr; gap:6px; }.source-expression { padding:17px 10px; gap:15px; }.source-expression > strong { font-size:10px; }.source-expression.is-market > strong { font-size:14px; }.source-expression-arrow { font-size:20px; }.source-expression p { font-size:10px; }
  .api-instruction-prompt { gap:10px; }.api-instruction-prompt > span { font-size:13px; }.api-command-stack { gap:9px; }.api-command-stack > div { padding:10px 8px; gap:8px; }.api-command-stack > div > b { font-size:6px; }
  .api-sync-network { grid-template-columns:72px 1fr 72px; gap:9px; }.api-sync-node { padding:18px 3px; gap:11px; }.api-sync-node > strong { font-size:9px; }.api-sync-node > small { font-size:6px; }.api-sync-lanes { gap:20px; }.api-sync-lanes em { font-size:6px; }.api-sync-lanes b { font-size:8px; }.sync-core { gap:5px; }.sync-core > b { font-size:6px; }.api-sync-receipt { gap:5px; }.api-sync-receipt > span { font-size:7px; padding:6px; }
  .image-recognition-workspace { grid-template-columns:122px 1fr; gap:16px; }.image-original-card > img { height:160px; }.image-recognition-tags > span { font-size:8px; gap:6px; padding:10px 8px; }.image-recognition-tags { gap:14px; }
  .image-studio-grid { gap:7px; }.image-studio-grid > figure { padding:4px; border-radius:9px; }.image-studio-grid > figure > img,.image-turntable { height:138px; }.image-studio-grid figcaption { font-size:7px; }.image-studio-grid figcaption i { display:none; }
  .image-content-page { grid-template-columns:107px 1fr; gap:11px; padding:9px; }.image-content-gallery > img { height:160px; }.image-content-copy { gap:12px; }.image-content-copy strong { font-size:14px; }.image-content-copy p { font-size:9px; }.image-content-copy > div > span { font-size:6px; padding:3px; }
  .processing-playback > div { gap:4px; }.processing-playback button { padding:0 8px; font-size:8px; min-height:34px; }.processing-playback > span { font-size:8px; }
  .image-draft-deliverables > div > span { flex-direction:column; padding:8px 4px; }.image-draft-deliverables img { width:52px; height:56px; }.image-draft-deliverables b { font-size:7px; }
}
@media (prefers-reduced-motion:reduce) {
  .image-sku-picker > button { transition:none; }
  .source-scene, .source-scene *, .source-scene *::before, .source-scene *::after { animation:none!important; transition:none!important; }
  .image-recognition-scan { display:none; }.processing-playback button { transition:none; }
}