#surface-view[data-surface="studio"]{max-width:none;padding:0;border:0;background:transparent}
.design-studio{--studio-bg:#f1f0f3;--studio-panel:#fff;--studio-ink:#252330;--studio-muted:#64616f;--studio-line:#c4c0cd;margin:0 auto;max-width:1600px;padding:12px;background:var(--studio-bg);color:var(--studio-ink);font:14px/1.5 system-ui,sans-serif}
.design-studio *{box-sizing:border-box}
.studio-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:10px}
.studio-head h1{margin:0;font-size:17px}.studio-head p,.studio-footnote{margin:0;font-size:12px;color:var(--studio-muted)}
.studio-directions{display:flex;gap:6px}
.design-studio button{background:var(--studio-panel);color:var(--studio-ink);border:1px solid var(--studio-line);border-radius:4px;padding:7px 14px;cursor:pointer;font:inherit}
.design-studio button[aria-pressed="true"]{background:var(--studio-ink);color:var(--studio-panel);border-color:var(--studio-ink)}
.design-studio button:focus-visible,.design-studio a:focus-visible{outline:3px solid #9370e8;outline-offset:3px}
.studio-toolbar{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin:10px 0}.studio-toolbar [role="group"]{display:flex;gap:3px}.studio-toolbar button{padding:4px 10px;font-size:12px}.studio-toolbar a{margin-left:auto;color:var(--studio-ink);font-size:12px;text-underline-offset:3px}
.studio-stage{display:flex;justify-content:center;padding:0;background:var(--studio-panel);border:1px solid var(--studio-line);overflow:hidden}
.studio-preview{width:100%;min-width:0}.studio-stage[data-size="phone"] .studio-preview{width:390px;max-width:100%}
.studio-console-frame{display:block;width:100%;height:660px;border:0;background:var(--studio-bg);color:var(--studio-ink)}
.studio-stage[data-size="phone"] .studio-console-frame{height:740px}
.studio-apply{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px}.studio-apply p{font-size:12px;color:var(--studio-muted);margin:0 0 0 8px}.studio-apply label{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--studio-ink)}
.studio-spec{padding:10px 0 18px;color:var(--studio-muted);font-size:12px}
:where(html[data-theme="dark"]) .design-studio{--studio-bg:#19191f;--studio-panel:#25252e;--studio-ink:#eeedf5;--studio-muted:#b3afc1;--studio-line:#514d61}
@media(max-width:760px){.design-studio{padding:8px}.studio-head{display:block}.studio-head p{font-size:10px}.studio-directions button{padding:7px 10px;font-size:12px}.studio-toolbar{gap:8px}.studio-toolbar a{margin-left:0}.studio-console-frame{height:740px}}


.design-studio [hidden]{display:none!important}


.studio-design-controls{display:grid;gap:10px;margin-bottom:12px;padding:12px;border:1px solid var(--studio-line);background:var(--studio-panel);color:var(--studio-ink);border-radius:6px}
.studio-control-label{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:5px;color:var(--studio-muted)}

/* The studio frame follows the saved app appearance, independently of OS and preview. */
html[data-fairystack-skin] .design-studio{--studio-bg:var(--skin-page);--studio-panel:var(--skin-panel);--studio-ink:var(--skin-ink);--studio-muted:var(--skin-muted);--studio-line:var(--skin-line)}

.design-studio button:disabled{background:var(--studio-panel);color:var(--studio-muted);cursor:wait}

.studio-directions{flex-wrap:wrap}