.device-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:12px;max-width:1200px;margin:0 auto;padding:8px 16px;color:#40563e;font-size:12px}
.device-toolbar button{font:inherit;min-height:44px;padding:8px 12px;border:1px solid #b99d65;border-radius:8px}
.device-options>p{font-size:13px;font-weight:650;margin:14px 0 8px;color:#203e33}
.device-options>[role=group]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.device-options button{font:inherit;font-size:12px;min-width:0;min-height:44px;padding:8px 6px;border:1px solid #b99d65;border-radius:8px;cursor:pointer}
.device-options button[aria-pressed=true]{outline:2px solid #203e33;outline-offset:2px;font-weight:700}
.device-welcome{display:none}.pip-introducing .device-welcome{display:block}
.device-dialog{width:min(440px,calc(100vw - 28px));max-height:calc(var(--visible-height,100dvh) - 24px);overflow:auto;box-sizing:border-box;padding:24px;background:#fffdf5;color:#203e33;border:1px solid #b99d65;border-radius:18px;position:fixed;inset:0;margin:auto}
.device-dialog::backdrop{background:#18372b88}.device-dialog h2{font-size:25px;line-height:1.2}.device-dialog>p{font-size:14px;line-height:1.6}.device-dialog .device-note{font-size:12px;color:#52614c}.device-dialog #device-done{font:inherit;min-height:44px;margin-top:12px;padding:8px 24px;border:1px solid #b99d65;border-radius:8px}
.phone-preview-version{display:none}
/* Give the photo the full width; navigation and the version choice share one row. */
body[data-studio-layout=phone]:not(.demo-active):not(.preview-short) .editor-workspace{grid-template-columns:minmax(0,1fr);grid-template-rows:clamp(290px,48dvh,430px) minmax(0,1fr);height:calc(var(--visible-height,100dvh) - 20px);gap:10px;max-width:760px;margin-inline:auto}
body[data-studio-layout=phone]:not(.demo-active):not(.preview-short) .editor-workspace .live-preview-rail{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto auto auto;padding:8px;gap:5px 10px}
body[data-studio-layout=phone]:not(.demo-active):not(.preview-short) .editor-workspace :is(.live-preview-body,.live-preview-info){display:contents}
body[data-studio-layout=phone]:not(.demo-active):not(.preview-short) .editor-workspace .live-preview-image{grid-column:1/-1;grid-row:1;height:100%;padding:2px;min-height:0}
body[data-studio-layout=phone]:not(.demo-active):not(.preview-short) .editor-workspace :is(.live-preview-heading,#live-preview-name,#live-preview-detail,#live-pack-preview-slot,#pack-preview-tabs,#preview-explainer,.compare-buttons){display:none}
body[data-studio-layout=phone]:not(.demo-active):not(.preview-short) .editor-workspace .live-preview-navigation{grid-column:1;grid-row:2;gap:5px;align-items:center;margin:0}
body[data-studio-layout=phone]:not(.demo-active) .live-preview-navigation button{min-width:44px;min-height:44px;padding:6px;font-size:17px}
body[data-studio-layout=phone]:not(.demo-active):not(.preview-short) .phone-preview-version{display:block;grid-column:2;grid-row:2;min-width:0}
.phone-preview-version select{font:inherit;font-size:16px;min-height:44px;width:100%;padding:6px;border:1px solid #a9b39e;border-radius:7px;background:#fffdf5;color:#203e33}
body[data-studio-layout=phone]:not(.demo-active):not(.preview-short) #editor-live-status{display:block;grid-column:1/-1;grid-row:3;margin:0;font-size:11px;text-align:center;line-height:1.4}
body[data-studio-layout=phone]:not(.demo-active):not(.preview-short) #photo-fix-note{grid-column:1/-1;grid-row:4;margin:0;font-size:11px}
body[data-studio-layout=phone]:not(.demo-active) .editor-tabs{gap:7px;scrollbar-width:thin}
body[data-studio-layout=phone]:not(.demo-active) .editor-tabs button{flex:0 0 auto;font-size:13px;min-height:44px;padding:9px 13px}
body[data-studio-layout=phone]:not(.demo-active) #editor-context p{font-size:13px}
body[data-studio-layout=phone]:not(.demo-active) #editor-tool-panel :is(input,textarea,select){font-size:16px}
/* One large demo result per phone; every photo and export version stays reachable. */
.demo-phone-controls{display:none}
body[data-studio-layout=phone] #tour-guide.collection-walkthrough{--demo-gallery-height:clamp(160px,29dvh,260px)}
body[data-studio-layout=phone] #tour-guide.collection-walkthrough .walkthrough-gallery,body[data-studio-layout=phone] #tour-guide.collection-walkthrough .walkthrough-gallery.is-pack{display:flex;height:var(--demo-gallery-height);align-items:center;justify-content:center;gap:0}
body[data-studio-layout=phone] #tour-guide.collection-walkthrough .walkthrough-photo-group{display:contents}
body[data-studio-layout=phone] #tour-guide.collection-walkthrough .walkthrough-photo-group h3,body[data-studio-layout=phone] #tour-guide.collection-walkthrough figcaption{display:none}
body[data-studio-layout=phone] #tour-guide.collection-walkthrough .walkthrough-photo-group figure,body[data-studio-layout=phone] #tour-guide.collection-walkthrough .walkthrough-photo-group figure:first-child{height:100%;width:100%;display:flex;align-items:center;justify-content:center;margin:0}
body[data-studio-layout=phone] #tour-guide.collection-walkthrough .demo-inspect{height:100%;width:100%;display:flex;align-items:center;justify-content:center}
body[data-studio-layout=phone] #tour-guide.collection-walkthrough .walkthrough-gallery canvas,body[data-studio-layout=phone] #tour-guide.collection-walkthrough .walkthrough-gallery figure:first-child canvas{max-height:100%;max-width:100%;width:auto;height:auto}
body[data-studio-layout=phone] #tour-guide .demo-phone-controls{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:5px;margin-top:8px}
#tour-guide .demo-phone-controls button{min-width:44px;min-height:44px;font-size:18px;padding:6px}
#tour-guide .demo-phone-controls label{min-width:0;display:block;text-align:center}
#demo-phone-count{display:block;font-size:11px;line-height:1.3;margin-bottom:3px;color:#40563e}
#demo-phone-version{width:100%;min-height:38px;font:inherit;font-size:13px;background:#fffdf5;color:#203e33;border:1px solid #a9b39e;border-radius:7px;padding:6px}
body[data-studio-layout=phone] #tour-guide #demo-visual-note{display:none}
@media(max-height:500px){body[data-studio-layout=phone] #tour-guide.collection-walkthrough{--demo-gallery-height:clamp(100px,27dvh,170px)}}

@media(max-width:370px) and (max-height:650px){body[data-studio-layout=phone] #tour-guide.collection-walkthrough[data-scene=export]{--demo-gallery-height:120px}}