.live-demo-bar{position:fixed;inset:0 0 auto;z-index:1000;background:#fff;border-bottom:2px solid #078cac;box-shadow:0 3px 12px #0c2c5415;padding:7px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#0c2c54}
.live-demo-bar strong{font-size:14px}
.live-demo-bar p{margin:2px 0 0;line-height:1.35;font-size:13px;max-width:70ch;min-height:36px}
.live-demo-count{font-size:12px;color:#52667f}
.live-demo-actions{display:flex;gap:8px;flex-shrink:0}
.live-demo-actions button{min-height:44px;padding:6px 10px;font-size:12px;touch-action:manipulation}
.content [data-action="sketch-tutorial"]{touch-action:manipulation}
.live-demo-hand{position:fixed;z-index:1002;width:48px;height:58px;pointer-events:none;filter:drop-shadow(0 2px 3px #001b4260);transition:left .22s ease,top .22s ease}
.live-demo-hand svg{width:100%;height:100%;overflow:visible}
.live-demo-hand.drawing{transition:none}
.live-demo-hand.pressing svg{transform:scale(.9);transform-origin:15px 15px}
.demo-target{outline:3px solid #078cac!important;outline-offset:4px}
.live-demo-on #toast{bottom:12px}
.live-demo-on{overflow:hidden}
.live-demo-on #content{position:fixed;inset:var(--demo-bar-height,150px) 0 0;z-index:900;overflow:auto;background:#f7fafc;padding:20px max(20px,calc((100vw - 1200px)/2));scroll-behavior:auto;overscroll-behavior:contain}
.live-demo-on .scene-editor{display:grid;grid-template-columns:minmax(280px,360px) minmax(0,1fr);gap:10px 24px;align-items:start}
.live-demo-on .scene-editor>*{grid-column:1;min-width:0;margin-top:0}
.live-demo-on .scene-editor #map{grid-column:2;grid-row:1 / span 20;position:sticky;top:12px;margin:0;align-self:start}
.live-demo-on .scene-editor .scene-tools{grid-template-columns:1fr 1fr;margin:0}
.live-demo-on .scene-editor .scene-quick-actions{position:static}
.live-demo-on .scene-editor .scene-legend{grid-column:2;grid-row:21}
.live-demo-on .scene-editor #map svg{max-height:70vh}
.live-demo-on #content select[size]{max-height:170px}
.live-demo-mobile .live-demo-bar{display:block;padding:6px 10px;left:max(0px,calc((100vw - 520px)/2));right:max(0px,calc((100vw - 520px)/2))}
.live-demo-mobile .live-demo-actions{margin-top:4px;gap:5px}
.live-demo-mobile .live-demo-actions button{padding:5px 7px;flex:1}
.live-demo-mobile .live-demo-bar p{font-size:13px;min-height:36px;max-height:54px;overflow:auto}
.live-demo-mobile .live-demo-count{font-size:11px}
.live-demo-mobile{--demo-map-height:clamp(150px,28dvh,240px)}
.live-demo-mobile #content{padding:12px 14px 28px;bottom:var(--demo-map-height);left:max(0px,calc((100vw - 520px)/2));right:max(0px,calc((100vw - 520px)/2))}
.live-demo-mobile .scene-editor{display:block}
.live-demo-mobile .scene-editor>*{margin-bottom:10px}
.live-demo-stage{display:none}
.live-demo-mobile .live-demo-stage{display:block;position:fixed;inset:auto max(0px,calc((100vw - 520px)/2)) 0;height:var(--demo-map-height);background:white;border-top:2px solid #078cac;z-index:901}
.live-demo-stage-label{display:block;height:22px;padding:2px 12px;font-size:11px;line-height:18px;color:#52667f}
.live-demo-map{height:calc(100% - 22px)}
.live-demo-map #map{height:100%;margin:0;border:0;border-radius:0;background:#e4ece1}
.live-demo-map #map svg{display:block;width:100%;height:100%}
.live-demo-mobile .scene-participant{gap:8px}
@media(prefers-reduced-motion:reduce){.live-demo-hand{transition:none}}