/* Focus view only: normal inline explorer retains its existing layout. */
.product-studio-entry { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px 24px; margin-top:22px; padding-top:18px; border-top:1px solid #40735d; color:#bce7d4; font-size:14px; }
.product-studio-open-button { display:inline-flex; align-items:center; justify-content:center; gap:24px; min-height:48px; padding:11px 18px; border:1px solid #ffd442; border-radius:7px; background:#ffd44212; color:#ffdf65; font:650 14px/1.4 Manrope,sans-serif; cursor:pointer; }
.product-studio-open-button[hidden] { display:none; }
.product-studio-open-button:hover { background:#ffd442; color:#104830; }
html[data-product-studio-open='true'], body.product-studio-open { overflow:hidden; }
.product-studio-placeholder { width:100%; pointer-events:none; }
dialog.product-studio { --studio-border:#386f57; --studio-ink:#f3fcf8; --studio-muted:#b9e6d3; position:fixed; inset:18px; width:calc(100% - 36px); max-width:1700px; height:calc(100dvh - 36px); max-height:none; margin:auto; padding:0; border:1px solid #518b72; border-radius:18px; background:#082317; color:var(--studio-ink); overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; box-shadow:0 35px 120px #00000099; }
.product-studio::backdrop { background:#03100ae8; backdrop-filter:blur(12px); }
.product-studio-frame { min-height:100%; background:radial-gradient(ellipse at 35% 42%,#16664355,transparent 62%),#082317; }
.product-studio-header { position:sticky; top:0; z-index:12; display:flex; align-items:center; justify-content:space-between; gap:16px 30px; padding:22px 32px; border-bottom:1px solid var(--studio-border); background:#092a1cf5; backdrop-filter:blur(18px); }
.product-studio-eyebrow { margin:0 0 5px; color:#ffdc62; font:650 11px/1.5 Manrope,sans-serif; letter-spacing:.15em; }
.product-studio #product-studio-title { display:flex; align-items:center; flex-wrap:wrap; gap:8px 18px; margin:0; color:#f6fdfa; font:650 27px/1.2 Manrope,sans-serif; letter-spacing:-.04em; }
.product-studio #product-studio-title span { color:#b8e5d2; font:500 13px/1.5 'DM Sans',sans-serif; letter-spacing:0; }
.product-studio-toolbar { display:flex; align-items:center; gap:10px; }
.product-studio-toolbar button,.product-studio-footer button { min-height:44px; border:1px solid #5a927a; border-radius:7px; padding:10px 15px; color:#eafaf3; background:#144932; font:600 14px/1.4 Manrope,sans-serif; cursor:pointer; }
.product-studio-toolbar .product-studio-close { display:flex; align-items:center; gap:20px; border-color:#ffd442; background:#ffd442; color:#10442d; }
.product-studio-close span { font-size:25px; line-height:16px; font-weight:400; }
.product-studio-toolbar button:disabled { cursor:default; color:#c0e2d3; opacity:.8; }
.product-studio-help { margin:0; padding:15px 32px 0; color:#b9e6d3; font-size:13px; line-height:1.6; }
.product-studio-slot { padding:24px 32px 16px; }
.product-studio #inside-system { margin:0; padding:0; max-width:none; width:100%; background:transparent; }
.product-studio #inside-system .model-picker-head { margin:0; padding:0; max-width:none; width:100%; }
.product-studio .model-picker-head>.section-heading,.product-studio .product-studio-entry { display:none; }
.product-studio .explorer-choice { margin:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,.42fr); align-items:end; gap:24px; }
.product-studio .model-picker { gap:8px; margin:0; }
.product-studio .model-picker button { padding:12px 16px; min-height:65px; font-size:21px; border-radius:8px; }
.product-studio .model-picker button span { font-size:12px; line-height:1.4; margin-top:4px; }
.product-studio .explorer-choice label { margin:0; font-size:14px; color:#b9e6d3; }
.product-studio #motion-variant { font-size:15px; min-height:48px; margin-top:7px; }
.product-studio .model-selection { display:flex; align-items:center; flex-wrap:wrap; gap:6px 18px; margin:14px 0 22px; padding:0; font-size:13px; }
.product-studio #selected-model-name { font-size:14px; }
.product-studio #model-selection-summary { margin:0; color:#b9e6d3; }
.product-studio #explorer-add { margin-left:auto; min-height:44px; font-size:14px; }
.product-studio #cc110000-story { margin:0; padding:0; background:transparent; }
.product-studio #cc110000-story::before { display:none; }
.product-studio #cc110000-story .story-grid { display:block; margin:0; padding:0; max-width:none; }
.product-studio #cc110000-story .story-heading,.product-studio #cc110000-story .story-steps,.product-studio #cc110000-story .story-footer { display:none; }
.product-studio #cc110000-story .story-visual { position:relative; top:auto; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(290px,.65fr); grid-template-rows:auto auto auto; gap:16px 28px; min-height:0; height:auto; width:100%; max-width:none; margin:0; align-content:start; }
.product-studio #cc110000-story .product-illustration { grid-column:1; grid-row:1; width:100%; height:clamp(330px,49dvh,650px); min-height:0; aspect-ratio:auto; border:1px solid #387259; border-radius:15px; overflow:hidden; background:radial-gradient(ellipse at 50% 60%,#1f765033,transparent 65%),#0a2b1d; }
.product-studio #cc110000-story .product-illustration svg { width:100%; height:100%; max-height:100%; }
.product-studio #cc110000-story .mobile-explorer { grid-column:2; grid-row:1 / 4; display:block; align-self:stretch; padding:22px; background:#103e2a; border:1px solid #387259; border-radius:15px; }
.product-studio #cc110000-story .mobile-chapters { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.product-studio .mobile-chapters button { min-height:52px; padding:11px; font-size:14px; line-height:1.4; }
.product-studio .mobile-chapters button span { font-size:12px; }
.product-studio .mobile-part-detail { padding:24px 0; min-height:190px; }
.product-studio .mobile-part-detail h3 { font-size:24px; line-height:1.2; }
.product-studio .mobile-part-detail p { font-size:15px; line-height:1.75; }
.product-studio .mobile-range-control { border-top:1px solid #3a775d; padding-top:18px; }
.product-studio .mobile-range-control label { font-size:14px; }
.product-studio .mobile-range-control input { min-height:44px; }
.product-studio #cc110000-story .viewer-tools { grid-column:1; grid-row:2; display:flex; flex-wrap:wrap; gap:12px; margin:0; padding:0; justify-content:space-between; }
.product-studio #cc110000-story .viewer-tools[hidden] { display:none; }
.product-studio #cc110000-story .viewer-tools>span { max-width:none; font-size:12px; }
.product-studio #cc110000-story .viewer-tools>div { flex-wrap:wrap; }
.product-studio #cc110000-story .viewer-tools button { min-height:44px; font-size:14px; }
.product-studio #cc110000-story .story-figure-label { display:block; grid-column:1; grid-row:3; margin:0; padding:0; border:0; font-size:12px; }
.product-studio #cc110000-story .story-figure-label strong { display:none; }
.product-studio #cc110000-story .story-figure-label span { display:block; text-align:left; max-width:none; }
.product-studio #cc110000-story .story-figure-label br { display:none; }
.product-studio #cc110000-story .story-photo-link { grid-column:2; grid-row:4; justify-self:start; align-self:start; margin:0; min-height:44px; font-size:14px; }
.product-studio #model-feature-scene { padding:0; margin:0; background:transparent; border:0; border-radius:0; box-shadow:none; overflow:visible; }
.product-studio .mf-heading h3 { font-size:24px; }
.product-studio .mf-eyebrow { display:none; }
.product-studio .mf-heading,.product-studio .mf-description { display:none; }
.product-studio .mf-layout { grid-template-columns:minmax(0,1.25fr) minmax(310px,.75fr); gap:28px; }
.product-studio .mf-image-stage { height:clamp(320px,44dvh,600px); aspect-ratio:auto; border-radius:15px; }
.product-studio .mf-content { padding:22px; background:#103e2a; border:1px solid #387259; border-radius:15px; }
.product-studio .mf-stage-controls button { font-size:14px; min-height:50px; }
.product-studio .mf-stage-detail { min-height:0; }
.product-studio .mf-stage-detail h4 { font-size:26px; }
.product-studio .mf-stage-detail dl>div { grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); }
.product-studio .mf-mode-note,.product-studio .mf-stage-kicker,.product-studio .mf-range-control>div { font-size:12px; }
.product-studio canvas { touch-action:pan-y pinch-zoom; }
.product-studio-footer { display:flex; justify-content:space-between; align-items:center; gap:16px 28px; margin-top:16px; padding:18px 32px; border-top:1px solid #387259; background:#09291b; }
.product-studio-footer p { margin:0; color:#aedac7; font-size:12px; line-height:1.7; }
.product-studio-footer .product-studio-feedback { min-height:21px; color:#ffe080; font-size:13px; }
.product-studio-footer button { flex-shrink:0; border-color:#689e87; color:#ffe080; }
.product-studio button:focus-visible,.product-studio select:focus-visible,.product-studio input:focus-visible,.product-studio a:focus-visible,.product-studio-open-button:focus-visible { outline:3px solid #ffd442; outline-offset:4px; }
@media(max-width:1000px) { .product-studio #cc110000-story .story-visual,.product-studio .mf-layout { grid-template-columns:minmax(0,1.1fr) minmax(290px,.9fr); gap:18px; } .product-studio-slot { padding-inline:22px; } .product-studio .mobile-part-detail { min-height:220px; } .product-studio .explorer-choice { grid-template-columns:1fr; gap:14px; } .product-studio .explorer-choice label { max-width:440px; } }
@media(max-width:760px) { dialog.product-studio { inset:0; width:100%; height:100dvh; border-radius:0; border-width:0; margin:0; } .product-studio-header { gap:14px; align-items:start; flex-wrap:wrap; padding:16px 18px; } .product-studio #product-studio-title { font-size:24px; } .product-studio #product-studio-title span { font-size:12px; } .product-studio-eyebrow { font-size:12px; } .product-studio-toolbar { width:100%; justify-content:space-between; } .product-studio-toolbar button { font-size:14px; padding-inline:12px; } .product-studio-help { padding:14px 18px 0; font-size:13px; } .product-studio-slot { padding:20px 18px 8px; } .product-studio .model-picker button { padding:11px 8px; font-size:19px; } .product-studio .model-picker button span { font-size:12px; } .product-studio #motion-variant { font-size:16px; } .product-studio .model-selection { margin-bottom:15px; gap:5px 10px; } .product-studio #explorer-add { margin-left:0; } .product-studio #cc110000-story .story-visual { display:flex; flex-direction:column; gap:14px; } .product-studio #cc110000-story .product-illustration { order:0; height:clamp(260px,44dvh,380px); } .product-studio #cc110000-story .viewer-tools { order:2; } .product-studio #cc110000-story .story-figure-label { order:3; } .product-studio #cc110000-story .mobile-explorer { order:1; width:100%; padding:18px; } .product-studio #cc110000-story .story-photo-link { order:4; } .product-studio .mobile-part-detail { min-height:150px; padding-block:20px; } .product-studio .mf-layout { grid-template-columns:1fr; } .product-studio .mf-image-stage { height:auto; min-height:0; aspect-ratio:1.2; } .product-studio .mf-content { padding:18px; } .product-studio .mf-heading { flex-wrap:wrap; gap:12px; } .product-studio-footer { align-items:start; flex-direction:column; gap:10px; padding:18px; } .product-studio-footer button { font-size:14px; } }
@media(prefers-reduced-motion:reduce) { .product-studio * { scroll-behavior:auto!important; transition:none!important; animation:none!important; } .product-studio::backdrop { backdrop-filter:none; } }
.motion-paused .product-studio * { transition:none!important; animation:none!important; }
.product-studio #model-feature-scene{width:100%;max-width:none}
.product-studio .has-p600-3d::after{content:'Illustrative 3D';position:absolute;top:14px;right:14px;z-index:4;pointer-events:none;font-size:12px;color:#246e4e;background:#ffffffd9;padding:6px 9px;border-radius:4px}
.product-studio .model-selection .product-studio-feedback{flex-basis:100%;margin:0;color:#ffe080;font-size:14px;line-height:1.5}
.product-studio .model-selection .product-studio-feedback:empty{height:0;min-height:0}
@media(max-width:760px){.product-studio .model-picker button span{display:none}.product-studio .model-picker button{min-height:48px}.product-studio #selected-model-name,.product-studio #model-selection-summary{display:none}.product-studio .model-selection{justify-content:flex-end;margin:5px 0 14px}.product-studio .model-selection .product-studio-feedback{text-align:left}.product-studio .explorer-choice{gap:11px}.product-studio .product-studio-help{font-size:14px}.product-studio #cc110000-story .product-illustration{height:clamp(255px,36dvh,330px)}}
@media(max-width:760px){.product-studio .mf-layout{display:flex;flex-direction:column;gap:16px}.product-studio .mf-visual{display:contents}.product-studio .mf-image-stage{order:0;width:100%}.product-studio .mf-content{order:2;width:100%}.product-studio .p600-studio-controls{order:1;width:100%;margin:0}.product-studio .mf-visual figcaption{order:3;font-size:12px;padding:0}}

.product-studio .mf-mode-buttons button,.product-studio .p600-studio-controls button,.product-studio .mf-source,.product-studio .mf-range-control label { font-size:14px; min-height:44px; }
.product-studio-mobile-controls { padding:12px 18px 0; }
.product-studio-mobile-controls[hidden] { display:none; }
.product-studio-mobile-controls button { min-height:44px; padding:10px 14px; border:1px solid #5a927a; border-radius:7px; background:#144932; color:#eafaf3; font:600 14px/1.4 Manrope,sans-serif; cursor:pointer; }
.product-studio-mobile-controls button:disabled { cursor:default; color:#c0e2d3; opacity:.8; }
@media(max-width:760px) {
  .product-studio-header { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; min-height:88px; padding:12px 18px; }
  .product-studio-eyebrow { display:none; }
  .product-studio #product-studio-title { display:block; font-size:22px; line-height:1.2; }
  .product-studio #product-studio-title span { display:block; margin-top:4px; font-size:12px; line-height:1.4; }
  .product-studio-toolbar { width:auto; gap:0; }
  .product-studio-toolbar .product-studio-close { gap:10px; min-height:44px; padding-inline:12px; font-size:14px; }
}
/* Keep the SVG fallback inside the Focus stage, independent of intrinsic grid sizing. */
.product-studio #cc110000-story .product-illustration > svg {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  max-width:100%;
  max-height:100%;
}