/* Route-owned product studies. Form controls and content remain independent. */
.demo-studio{--studio-ink:#214b3c;--studio-paper:#f1f5ef;--studio-line:#d7dfd7;position:relative;isolation:isolate;overflow:hidden;border:1px solid var(--studio-line);color:var(--studio-ink);background:var(--studio-paper);border-radius:22px}
.demo-studio--salon{--studio-ink:#c6a676;--studio-paper:#211c17;--studio-line:#4d4031}
.demo-studio--bakery{--studio-ink:#64472f;--studio-paper:#f3eadc;--studio-line:#e0d2be}
.demo-studio-copy{position:relative;z-index:2}.demo-studio-copy>span{display:block;font-family:inherit;font-size:10px;font-weight:650;letter-spacing:.14em;line-height:1.5}.demo-studio-copy h2{margin:8px 0 0;font:inherit;font-weight:550;letter-spacing:-.03em}.demo-studio-copy p{max-width:42ch;margin:16px 0 0;font-size:16px;line-height:1.65;opacity:.8}
.demo-studio-visual{position:relative;min-width:0;overflow:hidden}.demo-studio-canvas,.demo-studio-fallback{position:absolute;inset:0}.demo-studio-canvas{opacity:0;transition:opacity .45s}.demo-studio-canvas canvas{width:100%!important;height:100%!important;display:block;touch-action:pan-y}.demo-studio-fallback{display:grid;place-items:center;transition:opacity .4s}.demo-studio-fallback img{width:100%;height:100%;object-fit:cover}.demo-studio-fallback svg{width:160px;max-width:90%;height:100px}.demo-studio.is-ready .demo-studio-canvas{opacity:1}.demo-studio.is-ready .demo-studio-fallback{opacity:0;visibility:hidden}
.demo-studio-controls{display:flex;gap:4px;position:relative;z-index:2}.demo-studio-controls button{font:inherit;font-size:12px;line-height:1.2;min-height:40px;padding:9px 14px;border-radius:999px;border:1px solid var(--studio-line);background:transparent;color:inherit;cursor:pointer}.demo-studio-controls button[aria-pressed=true]{background:var(--studio-ink);color:var(--studio-paper)}.demo-studio-controls button:focus-visible{outline:3px solid currentColor;outline-offset:3px}
.demo-studio--feature{max-width:1320px;margin:72px auto;padding:40px;display:grid;grid-template-columns:minmax(250px,.7fr) minmax(0,1fr);align-items:center;column-gap:24px}.demo-studio--feature .demo-studio-copy h2{font-size:clamp(30px,3.5vw,48px);line-height:1.08}.demo-studio--feature .demo-studio-visual{grid-column:2;grid-row:1/3;height:430px}.demo-studio--feature .demo-studio-controls{margin-top:28px;flex-wrap:wrap}.demo-studio--compact{display:grid;grid-template-columns:minmax(0,1fr) 150px;grid-template-rows:auto auto;align-items:center;gap:0 16px;padding:16px 20px;margin:0 0 24px;min-height:124px}.demo-studio--compact .demo-studio-copy h2{font-size:20px;line-height:1.2;margin-top:4px}.demo-studio--compact .demo-studio-visual{height:108px;grid-column:2;grid-row:1/3}.demo-studio--compact .demo-studio-controls{margin-top:10px}.demo-studio--compact .demo-studio-controls button{font-size:11px;min-height:34px;padding:6px 10px}.demo-studio--compact .demo-studio-copy>span{font-size:9px}
@media(max-width:800px){.demo-studio--feature{margin:32px 20px;padding:26px;grid-template-columns:minmax(0,1fr);gap:8px}.demo-studio--feature .demo-studio-visual{grid-column:1;grid-row:2;height:310px}.demo-studio--feature .demo-studio-controls{justify-content:center;margin-top:0}.demo-studio--feature .demo-studio-copy h2{font-size:32px}.demo-studio--compact{padding:14px;grid-template-columns:minmax(0,1fr) 110px;gap:8px;min-height:118px}.demo-studio--compact .demo-studio-visual{height:96px}.demo-studio--compact .demo-studio-copy h2{font-size:17px}.demo-studio--compact .demo-studio-controls button{padding:6px 8px}}
@media(prefers-reduced-motion:reduce){.demo-studio *{transition:none!important}}
@media print{.demo-studio{display:none!important}}

.demo-studio--bakery.demo-studio--compact{max-width:1180px;margin:20px auto 28px;width:100%}.workspace .demo-studio--compact{margin:0 0 24px}.pos-layout .demo-studio--compact{margin:0 0 16px}.demo-studio--bakery .demo-studio-copy h2{font-family:inherit}.demo-studio--feature{width:calc(100% - 80px)}@media(max-width:800px){.demo-studio--feature{width:calc(100% - 40px)}.demo-studio--bakery.demo-studio--compact{width:100%}}
/* Existing bakery photography stays visible; the WebGL runtime is not mounted. */
.demo-studio--feature .demo-studio-visual{min-height:380px}
.demo-studio--feature .demo-studio-fallback img{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:800px){.demo-studio--feature .demo-studio-visual{min-height:310px}}