/* Material-led cinematic environments, progressively enhanced from a still image. */
[data-scene-studio]{position:relative;isolation:isolate;overflow:hidden;border-radius:24px;background:radial-gradient(ellipse at 45% 25%,#fffdf7 0%,#e7e6df 64%,#ccd3ce 100%);color:#233a31;min-width:0}
.studio-canvas{position:relative;z-index:2;width:100%;height:clamp(360px,38vw,560px);touch-action:pan-y;outline:none}
.studio-canvas canvas{display:block;width:100%;height:100%;touch-action:pan-y;cursor:grab;outline-offset:-5px}
.studio-canvas canvas:active{cursor:grabbing}.studio-canvas canvas:focus-visible{outline:2px solid #305e4b}
.studio-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;transition:opacity .45s ease}
.studio-ready .studio-fallback{opacity:0;pointer-events:none}.studio-static .studio-canvas{visibility:hidden}
.studio-loading .studio-status:before{content:'';display:inline-block;width:10px;height:10px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;margin-right:8px;animation:studio-loading .9s linear infinite}
.studio-status{position:relative;z-index:3;font-size:.76rem;line-height:1.5;color:#3e5549;min-height:1.5em;margin:0;padding:8px 20px 14px;background:rgba(248,248,239,.9)}
.studio-toolbar,.studio-materials{position:relative;z-index:3;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.studio-toolbar{padding:14px 18px;background:rgba(248,248,239,.9);border-top:1px solid #3c53401a}
[data-studio-action],[data-studio-light],[data-studio-zoom]{font:inherit;font-size:.76rem;font-weight:600;line-height:1.2;min-height:42px;padding:10px 13px;border:1px solid #bdc9bc;border-radius:5px;background:#fffdf7;color:#314f40;cursor:pointer;transition:background .2s,border-color .2s}
[data-studio-action]:hover,[data-studio-light]:hover,[data-studio-zoom]:hover{background:#e2e9dc;border-color:#7f967e}
[data-studio-action][aria-pressed=true],[data-studio-light][aria-pressed=true]{background:#294f3c;color:#fff;border-color:#294f3c}
[data-scene-studio] button:disabled,[data-studio-progress]:disabled{opacity:.45;cursor:default}
[data-scene-studio] button:focus-visible,[data-studio-progress]:focus-visible{outline:3px solid #5572ab;outline-offset:3px}
.studio-ready [data-studio-action=activate]{display:none}
[data-studio-material]{min-width:36px;min-height:36px;border:3px solid #fffdf6;box-shadow:0 0 0 1px #bac5b8;cursor:pointer;border-radius:50%;background:var(--swatch,var(--finish,#719482));transition:box-shadow .2s}
[data-studio-material][aria-pressed=true]{box-shadow:0 0 0 2px #274734}
body[data-service] .premium-studio.cinematic-studio{--studio-height:clamp(400px,42vw,600px);min-height:0;box-shadow:0 24px 64px #233a3112;background:radial-gradient(ellipse at 44% 20%,#fffef9,#e8e8e1 63%,#cfd8d3);border:1px solid var(--line,#cad1c6);transition:background .6s ease}
body[data-service] .premium-studio.cinematic-studio[data-studio-light=evening]{background:radial-gradient(ellipse at 48% 28%,#586875,#283747 66%,#1c2834)}
body[data-service] .premium-studio.cinematic-studio .studio-canvas{position:relative;inset:auto;height:var(--studio-height);width:100%}
body[data-service] .premium-studio.cinematic-studio .studio-canvas:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 42%,transparent 45%,#1b2a2410 100%);z-index:2}
body[data-service] .premium-studio.cinematic-studio .studio-fallback{inset:0 0 auto;height:var(--studio-height);object-fit:cover}
body[data-service] .premium-studio.cinematic-studio>.studio-status{position:relative;inset:auto;margin:0;padding:12px 22px;font-size:10px;line-height:1.55;min-height:40px;background:#f6f6ef;border-top:1px solid #354f3c12;color:#526054}
body[data-service] .premium-studio.cinematic-studio .premium-studio-meta{top:23px;left:24px;right:24px;font-size:8px;letter-spacing:1.35px;color:#32473c}
body[data-service] .premium-studio.cinematic-studio[data-studio-light=evening] .premium-studio-meta{color:#f1f0e7}
body[data-service] .premium-studio.cinematic-studio .premium-studio-activate{top:calc(var(--studio-height) * .46);bottom:auto}
body[data-service] .premium-studio.cinematic-studio .premium-studio-controls{position:relative;inset:auto;padding:14px 20px;background:#f6f6ef;border-top:1px solid #354f3c12;min-height:0;display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between}
body[data-service] .cinematic-studio .premium-toolgroup{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
body[data-service] .cinematic-studio .premium-toolgroup button{min-height:38px;padding:9px 12px;font-size:10px}
body[data-service] .cinematic-studio .premium-swatches{display:flex;gap:9px;margin-left:0;padding:2px}
body[data-service] .cinematic-studio .premium-swatches button{width:29px;height:29px;min-width:29px;min-height:29px;border-width:3px;background:var(--swatch)}
.studio-stage-list{position:relative;z-index:3;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;background:#f6f6ef;border-top:1px solid #354f3c18}
[data-cinematic-chapter][hidden]{display:none!important}
[data-studio-stage]{position:relative;min-width:0;min-height:86px;padding:16px 12px;background:transparent;border:0;border-right:1px solid #354f3c12;color:#526153;text-align:left;font:inherit;cursor:pointer;transition:background .25s,color .25s}
[data-studio-stage]:last-child{border-right:0}[data-studio-stage]:hover{background:#e6eade}[data-studio-stage][aria-pressed=true]{background:#dce5d7;color:#263c2e}
[data-studio-stage]:before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:transparent}[data-studio-stage][aria-pressed=true]:before{background:#42624a}
[data-studio-stage] span{display:block;font-size:8px;letter-spacing:1.3px;opacity:.7;margin-bottom:9px}
[data-studio-stage] strong{display:block;font-size:11px;font-weight:500;line-height:1.4;overflow-wrap:anywhere}
.studio-journey-controls{position:relative;z-index:3;display:flex;gap:15px;align-items:center;flex-wrap:wrap;padding:16px 20px;background:#f6f6ef;border-top:1px solid #354f3c12}
.studio-journey-controls [data-studio-action=journey]{background:#2e4936;border-color:#2e4936;color:#fff;padding-inline:17px;min-width:132px}
.studio-journey-controls [data-studio-action=journey][aria-pressed=true]{background:#e0e9d9;color:#2e4936}
.studio-timeline{display:flex;flex:1;min-width:100px;align-items:center;gap:12px;font-size:9px;letter-spacing:.5px;color:#5a685b}
[data-studio-progress]{flex:1;width:100%;min-width:70px;accent-color:#3a6044;cursor:pointer;min-height:32px;margin:0;touch-action:pan-y}
.studio-light-controls{display:flex;gap:5px;align-items:center}.studio-light-controls button{min-height:35px;font-size:10px;padding:8px 10px}
@keyframes studio-loading{to{transform:rotate(360deg)}}
@media(max-width:760px){
 [data-scene-studio]{border-radius:17px}.studio-canvas{height:380px}.studio-toolbar{padding:12px;gap:6px}[data-studio-action],[data-studio-light],[data-studio-zoom]{padding:10px;font-size:.72rem}.studio-status{padding:8px 13px 13px;font-size:.72rem}
 body[data-service] .premium-studio.cinematic-studio{--studio-height:420px}
 body[data-service] .premium-studio.cinematic-studio .premium-studio-meta{font-size:7px;top:17px;left:16px;right:16px}
 body[data-service] .premium-studio.cinematic-studio>.studio-status{padding:11px 15px;font-size:9px;min-height:42px}
 body[data-service] .premium-studio.cinematic-studio .premium-studio-controls{padding:13px 14px;gap:12px;justify-content:flex-start}
 body[data-service] .cinematic-studio .premium-toolgroup{gap:6px}
 body[data-service] .cinematic-studio .premium-toolgroup button{font-size:9px;min-height:36px;padding:8px 10px}
 .studio-stage-list{display:flex;overflow-x:auto;scrollbar-width:thin;overscroll-behavior-x:contain}
 [data-studio-stage]{flex:0 0 124px;min-height:78px;padding:14px 12px}[data-studio-stage] strong{font-size:10px}[data-studio-stage] span{font-size:7px;margin-bottom:8px}
 .studio-journey-controls{padding:13px 14px;gap:10px}.studio-journey-controls [data-studio-action=journey]{min-width:119px;font-size:10px;min-height:38px}.studio-timeline{min-width:110px}.studio-light-controls{margin-left:auto}.studio-light-controls button{font-size:9px;min-height:34px;padding-inline:9px}
}
@media(max-width:380px){body[data-service] .premium-studio.cinematic-studio{--studio-height:380px}.studio-journey-controls{gap:8px}.studio-timeline{min-width:80px}}
@media(prefers-reduced-motion:reduce){.studio-fallback,[data-scene-studio],[data-studio-action],[data-studio-material],[data-studio-stage]{transition:none!important}.studio-loading .studio-status:before{animation:none}}
body[data-motion=paused] .studio-loading .studio-status:before{animation:none}