/* A readable editor column, with secondary options disclosed on demand. */
html[data-project] .project-menu-group{border:0;border-bottom:1px solid var(--line);border-radius:0;margin:0;padding:0;background:transparent}
html[data-project] .project-menu-group:last-child{border-bottom:0}
html[data-project] .project-menu-group>summary{display:flex;align-items:center;gap:12px;list-style:none;cursor:pointer;min-height:56px;padding:12px 0;color:var(--ink);background:transparent!important;box-sizing:border-box}
html[data-project] .project-menu-group>summary::-webkit-details-marker{display:none}
html[data-project] .project-menu-group>summary:after{content:'+';margin-inline-start:auto;font-size:22px;font-weight:400;color:var(--accent);flex:none}
html[data-project] .project-menu-group[open]>summary:after{content:'−'}
html[data-project] .project-menu-group>summary :is(.section-head,h2){display:flex;align-items:center;gap:10px;flex:1;margin:0!important;font-size:15px;line-height:1.7}
html[data-project] .project-menu-group>summary .step{margin-inline-start:auto}
html[data-project] .project-menu-content{padding:4px 0 20px;min-width:0}
html[data-project] .project-menu-content>label{margin-top:14px}
html[data-project] .project-menu-content>:first-child{margin-top:0}
html[data-project] .settings>section:has(.project-menu-group){margin:0;padding:0;border:0}
html[data-project] :is(.panel,.settings){box-sizing:border-box;min-width:0}
html[data-project] :is(.preview-tabs,.preview-head,.preview-toolbar,.export-bar){flex-wrap:wrap;gap:8px}
html[data-project] :is(.panel,.settings) :is(select,input:not([type=color],[type=range],[type=checkbox],[type=radio])){min-height:42px;box-sizing:border-box;max-width:100%}
html[data-project] :is(.pair,.colors){min-width:0}
html[data-project] .pair>*{min-width:0}
html[data-project] .intro>.steps{display:none}
html[data-project] .fab-modebar{padding:8px;margin-bottom:12px}
html[data-project] .fab-modebar .fab-modes button{min-height:44px;padding:8px;font-size:12px}
html[data-project] .studio-view-tabs{margin-bottom:12px}
@media(min-width:901px){
 html[data-project] .workspace.fab-three-columns{display:grid!important;grid-template-columns:minmax(0,1fr) 350px!important;gap:20px!important;direction:ltr;align-items:start}
 html[data-project] .workspace.fab-three-columns>.panel{grid-column:2!important;grid-row:1!important;padding:20px!important;position:static!important;max-height:none!important;overflow:visible!important}
 html[data-project] .workspace.fab-three-columns>.fab-panel{grid-column:2!important;grid-row:2!important;position:static!important;max-height:none!important;margin:0!important;padding:16px!important}
 html[data-project] .workspace.fab-three-columns>.preview-column{grid-column:1!important;grid-row:1/span 3!important;display:block!important;min-width:0}
 html[data-project-layout=left] .workspace.fab-three-columns{grid-template-columns:350px minmax(0,1fr)!important}
 html[data-project-layout=left] .workspace.fab-three-columns>:is(.panel,.fab-panel){grid-column:1!important}
 html[data-project-layout=left] .workspace.fab-three-columns>.preview-column{grid-column:2!important}
 html[data-project-layout=stacked] .workspace.fab-three-columns{display:flex!important;flex-direction:column!important}
 html[data-project-layout=stacked] .workspace.fab-three-columns>.preview-column{order:0}
 html[data-project-layout=stacked] .workspace.fab-three-columns>.panel{order:1}
 html[data-project-layout=stacked] .workspace.fab-three-columns>.fab-panel{order:2}
 html[data-project] .studio>.settings{position:static!important;max-height:none!important;overflow:visible!important;padding:20px!important}
}
@media(max-width:900px){
 html[data-project] .workspace.fab-three-columns>.preview-column{display:block!important;order:0!important}
 html[data-project] .workspace.fab-three-columns>.panel{order:1!important}
 html[data-project] .workspace.fab-three-columns>.fab-panel{order:2!important}
 html[data-project] :is(.workspace,.studio) #viewport{height:340px!important;min-height:0}
 html[data-project] .project-layout-tools{gap:6px}
 html[data-project] .project-layout-tools button{width:38px;min-width:38px;height:38px;padding:7px}
 html[data-project] .fab-modebar .fab-modes button{font-size:11px;gap:5px}
 html[data-project] .panel,html[data-project] .settings{padding:16px!important}
}
html[data-project] .settings>section:has(.project-menu-group){border-bottom:1px solid var(--line)}
html[data-project] .settings>section:has(.project-menu-group):last-of-type{border-bottom:0}
@media(min-width:901px){
 html[data-project] .workspace.fab-three-columns>.size-panel{grid-column:2!important;grid-row:2!important;position:static!important;max-height:none!important;overflow:visible!important;margin:0!important;box-sizing:border-box}
 html[data-project] .workspace.fab-three-columns:has(>.size-panel)>.fab-panel{grid-row:3!important}
 html[data-project] .workspace.fab-three-columns:has(>.size-panel)>.preview-column{grid-row:1/span 4!important}
 html[data-project-layout=left] .workspace.fab-three-columns>.size-panel{grid-column:1!important}
}
@media(max-width:900px){html[data-project] .workspace>.size-panel{position:static!important;max-height:none!important;order:2!important;width:100%;box-sizing:border-box}html[data-project] .workspace:has(>.size-panel)>.fab-panel{order:3!important}}
html[data-project] .name-card>summary{min-height:48px;box-sizing:border-box;line-height:1.7}