/* Calm editor chrome: reference-inspired hierarchy, native FRAY components. */
/* Supplied identity artwork: show the original variant for each theme. */
body .frayLogoOnDark{display:block!important}
body .frayLogoOnLight{display:none!important}
html[data-theme="light"] body .frayLogoOnDark{display:none!important}
html[data-theme="light"] body .frayLogoOnLight{display:block!important}
html[data-theme] body header .brandMark,body header .brandMark{width:44px!important;height:44px!important;flex:0 0 44px!important;object-fit:contain;filter:none!important;transform:none!important}
body .accessBrand img{width:44px;height:44px;object-fit:contain;filter:none;transform:none}
@media(max-width:680px){html[data-theme] body header .brandMark,body header .brandMark{width:40px!important;height:40px!important;flex-basis:40px!important}}
body aside #mixGroup .mixToolbar{display:flex;align-items:center;gap:12px;margin:0 0 16px;min-width:0}
body aside #mixGroup #mixToggle{display:inline-flex;align-items:center;justify-content:space-between;gap:8px;flex:none;width:auto;min-height:44px;padding:0 4px;border:0;border-radius:4px;background:transparent!important;color:var(--studio-copy);box-shadow:none;font:500 13px/1.4 var(--ui-font);cursor:pointer}
body aside #mixGroup .mixSwitchTrack{display:block;box-sizing:border-box;flex:none;width:36px;height:22px;padding:3px;border:1px solid var(--studio-muted);border-radius:12px;background:var(--studio-rail)}
body aside #mixGroup .mixSwitchTrack>span{display:block;width:14px;height:14px;border-radius:50%;background:var(--studio-muted)}
body aside #mixGroup #mixToggle[aria-checked="true"] .mixSwitchTrack{background:var(--ux-action);border-color:var(--ux-action)}
body aside #mixGroup #mixToggle[aria-checked="true"] .mixSwitchTrack>span{background:var(--ux-action-ink);transform:translateX(14px)}
body aside #mixGroup .mixModePicker{display:flex;flex:1;min-width:0;gap:2px;padding:3px;border:1px solid var(--studio-edge);border-radius:6px;background:var(--studio-rail)}
body aside #mixGroup .mixModePicker button{flex:1;min-width:0;min-height:36px!important;padding:6px 8px!important;border:0!important;border-radius:3px!important;background:transparent!important;color:var(--studio-muted)!important;box-shadow:none!important;font:500 12px/1.4 var(--ui-font)!important}
body aside #mixGroup .mixModePicker button[aria-pressed="true"]{background:var(--studio-surface)!important;color:var(--studio-copy)!important;box-shadow:inset 0 -2px var(--ux-action)!important}
body aside #mixGroup :is(#mixToggle,.mixModePicker button):focus-visible{outline:2px solid var(--studio-copy);outline-offset:2px}
@media(pointer:coarse){body aside #mixGroup .mixModePicker button{min-height:44px!important}}
/* Mix follows a single flow: create, refine, configure, save, revisit. */
html[data-theme] body[data-ux-step] aside #mobileInspector #mixGroup,html[data-theme] body aside #mobileInspector #mixGroup .mixLab{background:transparent!important;border:0!important;box-shadow:none!important}
body aside #mixGroup .mixLab{padding:0!important;margin:0!important;border-radius:0!important}
body aside #mixGroup .mixLabHead{display:none!important}
body aside #mixGroup .mixLabPrimary{display:grid;grid-template-columns:1fr 1fr!important;gap:8px;margin:0 0 8px!important}
body aside #mixGroup .mixLabPrimary button{min-height:44px!important;font:500 13px/1.4 var(--ui-font)!important;margin:0!important}
body aside #mixGroup :is(.mixExploreActions,.mixSavedActions){display:flex;gap:8px;align-items:center;margin:0 0 16px}
body aside #mixGroup :is(.mixExploreActions,.mixSavedActions) button{flex:1;min-width:0;min-height:40px!important;margin:0!important;padding:6px 8px!important;font:400 12px/1.4 var(--ui-font)!important;background:transparent!important;border-color:var(--studio-edge)!important;color:var(--studio-copy)!important}
body aside #mixGroup .mixExploreActions button:before{display:none!important}
body aside #mixGroup .mixRerollGroup{border:0;border-top:1px solid var(--studio-edge);padding:12px 0 16px;margin:0;min-width:0}
body aside #mixGroup .mixRerollGroup legend{padding:0 8px 0 0;color:var(--studio-muted);font:500 12px/1.4 var(--ui-font)}
body aside #mixGroup .mixLabReroll{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0!important}
body aside #mixGroup .mixLabReroll button{min-width:0;min-height:40px!important;padding:6px 10px!important;font:400 12px/1.4 var(--ui-font)!important;text-align:left!important;justify-content:flex-start;background:transparent!important;border-color:var(--studio-edge)!important;color:var(--studio-copy)!important}
body aside #mixGroup .mixDistribution{margin:0 0 12px;padding:12px 0 0;border-top:1px solid var(--studio-edge)}
body aside #mixGroup .mixMaskField{display:grid;grid-template-columns:minmax(80px,.8fr) minmax(0,1.2fr);align-items:center;gap:12px;margin:0!important}
body aside #mixGroup .mixMaskField>span{font:400 12px/1.4 var(--ui-font);color:var(--studio-copy)}
body aside #mixGroup .mixMaskField select{width:100%;min-width:0;min-height:44px;font-size:13px}
body aside #mixGroup #maskDescription{font:400 12px/1.5 var(--ui-font);color:var(--studio-muted);margin:8px 0}
body aside #mixGroup .maskActions{display:flex;align-items:center;gap:12px;margin:8px 0 12px}
body aside #mixGroup .maskActions .btn{width:auto;flex:none;min-height:36px!important;padding:6px 8px!important;font-size:12px!important}
body aside #mixGroup #btnRandomMask[hidden]{display:none!important}
body aside #mixGroup .maskActions .chk{font-size:12px;line-height:1.4;min-height:44px;display:flex;align-items:center;gap:6px;margin:0}
body aside #mixGroup .mixSection{margin:0 0 12px;border:0;border-top:1px solid var(--studio-edge);background:transparent;border-radius:0;padding:0}
body aside #mixGroup .mixSection>summary{display:flex;align-items:center;gap:8px;justify-content:space-between;min-height:44px;padding:4px 0;font:500 13px/1.4 var(--ui-font);color:var(--studio-copy);cursor:pointer;list-style:none}
body aside #mixGroup .mixSection>summary::-webkit-details-marker{display:none}
body aside #mixGroup .mixSection>summary:after{content:'+';font-size:18px;line-height:1;width:20px;text-align:center;color:var(--studio-muted)}
body aside #mixGroup .mixSection[open]>summary:after{content:'−'}
body aside #mixGroup #mixHistoryCount{margin-left:auto;color:var(--studio-muted);font-size:12px;font-variant-numeric:tabular-nums}
body aside #mixGroup .mixSectionBody{padding:8px 0 12px}
body aside #mixGroup .mixLabControls{border:0!important;padding:0!important;margin:0 0 12px;display:grid;gap:12px}
body aside #mixGroup .mixLabControls .fld{margin:0!important}
body aside #mixGroup .mixLabControls select{min-height:44px}
body aside #mixGroup .mixHistoryHead{margin:12px 0 8px;font:500 12px/1.4 var(--ui-font);color:var(--studio-muted)}
body aside #mixGroup :is(.mixLabToggles,.mixRandomRules>.row){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 12px!important;padding:0}
body aside #mixGroup .mixRandomRules>.row{grid-template-columns:1fr 1fr;margin:0!important}
body aside #mixGroup :is(.mixLabToggles,.mixRandomRules) button{min-width:0;min-height:44px!important;padding:6px!important;font:400 12px/1.4 var(--ui-font)!important;background:transparent!important;border:1px solid var(--studio-edge)!important;color:var(--studio-copy)!important;box-shadow:none!important}
body aside #mixGroup :is(.mixLabToggles,.mixRandomRules) button:before{content:'○';display:inline-block;margin-right:6px;font-size:12px;color:var(--studio-muted)}
body aside #mixGroup :is(.mixLabToggles,.mixRandomRules) button[aria-pressed="true"]:before{content:'✓';color:var(--studio-copy)}
body aside #mixGroup :is(.mixLabToggles,.mixRandomRules) button[aria-pressed="true"]{border-color:var(--studio-copy)!important}
body aside #mixGroup #btnFavoritesMix:after{content:attr(data-count);margin-left:8px;font-variant-numeric:tabular-nums;color:var(--studio-muted)}
body aside #mixGroup #mixHistory{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important;max-height:340px;overflow-x:hidden!important;overflow-y:auto;white-space:normal;min-width:0;margin:4px 0 12px;padding:0!important}
body aside #mixGroup #mixHistory button{display:flex;flex-direction:column;gap:8px;width:100%;min-width:0;max-width:none!important;min-height:44px;padding:6px!important;border:1px solid var(--studio-edge)!important;border-radius:6px;background:transparent!important;color:var(--studio-copy)!important;text-align:left;white-space:normal;overflow:hidden;text-overflow:clip}
body aside #mixGroup #mixHistory button img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;background:var(--studio-rail);border-radius:3px}
body aside #mixGroup #mixHistory button span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;font:400 12px/1.4 var(--ui-font)}
body aside #mixGroup .mixHistoryEmpty{grid-column:1/-1;font:400 12px/1.5 var(--ui-font);color:var(--studio-muted);padding:8px 0}
body aside #mixGroup #mixLayersOptions>.fld{padding:0 12px}
body aside #mixGroup :is(button,summary):focus-visible{outline:2px solid var(--studio-copy);outline-offset:2px}
@media(max-width:680px){body aside #mixGroup :is(.mixExploreActions,.mixSavedActions,.mixLabReroll,.mixModePicker) button{min-height:44px!important}body aside #mixGroup .mixMaskField select{font-size:16px}}
/* Shared inspector rhythm. Keep disclosures native and controls in their existing DOM. */
/* Navigation belongs to the tab bar, not a second next-step prompt. */
body[data-ux-step] aside #workflowGuide{display:none!important}
/* Active navigation already names these panels. Retain semantic headings and IDs. */
body aside :is(#hSource,#hAnim,#hRender){position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
body aside #currentLookLabel{display:none!important}
body aside #styleAccess .currentLook{gap:0!important}
body aside .group:has(>#hSource),body aside .group:has(>#hAnim),body aside .group:has(>#hRender){padding-top:12px!important}
body aside #parameterSections .parameterSection{padding:0;margin:0 0 12px;border:0;background:transparent}
body aside #parameterSections .parameterSection[hidden]{display:none!important}
body aside #parameterSections h3{font:500 12px/1.4 var(--ui-font);color:var(--studio-muted);margin:0 0 12px;padding-top:12px;border-top:1px solid var(--studio-edge)}
body aside #parameterSections .parameterSection:first-child h3{border-top:0;padding-top:0}
body aside #parameterSections .ctl{margin:0 0 12px!important;padding:0!important}
body[data-ux-step="source"] aside #workflowGuide{display:none!important}
body aside #siHead{padding:12px 16px!important;gap:12px!important}
body aside #siHead :is(h2,#siTitle){font-size:18px!important;line-height:1.3!important}
body aside #siBody{padding:16px!important;scrollbar-width:thin}
body aside #paramsGroup>.ctl,body aside #paramsAdvanced>.ctl{margin:0 0 12px!important}
body aside #paramsAdvanced>.ctl{margin-left:12px!important;margin-right:12px!important}
body aside #paramsAdvanced>summary{margin-bottom:0!important}
body aside #paramsAdvanced[open]>summary{margin-bottom:12px!important;border-bottom:1px solid var(--studio-edge)!important}
body aside #paramsGroup .ctl>label{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:28px;margin-bottom:2px!important;font-size:13px!important}
body aside #paramsGroup output{min-width:48px;text-align:right;font-variant-numeric:tabular-nums;font-size:12px!important}
body aside #paramsGroup input[type="range"]{min-height:24px;margin:0!important}
/* One aligned row per parameter. Keep the native ranges and their event wiring. */
body aside #parameterSections .ctl{display:grid!important;grid-template-columns:minmax(94px,1fr) minmax(80px,1.5fr) 48px;align-items:center;column-gap:12px;min-height:44px;margin:0!important;padding:0!important}
body aside #parameterSections .ctl[hidden]{display:none!important}
body aside #parameterSections .ctl>label{display:contents!important}
body aside #parameterSections .ctl>label>span{grid-column:1;grid-row:1;font-size:12px;line-height:1.3;color:var(--studio-copy);overflow-wrap:anywhere}
body aside #parameterSections .ctl output{grid-column:3;grid-row:1;box-sizing:border-box;width:48px;min-width:0;padding:4px 5px!important;font-variant-numeric:tabular-nums}
body aside #parameterSections .ctl input[type="range"]{grid-column:2;grid-row:1;width:100%!important;min-width:0;height:44px!important;min-height:44px!important;padding:0!important;margin:0!important;align-self:center}
body aside #parameterSections h3{margin:0 0 4px;padding-top:12px}
body aside #paramsGroup #hParams{margin-bottom:16px!important}
@media(max-width:360px){
 body aside #parameterSections .ctl{grid-template-columns:minmax(0,1fr) 48px;column-gap:8px;row-gap:0;padding-top:4px!important}
 body aside #parameterSections .ctl output{grid-column:2}
 body aside #parameterSections .ctl input[type="range"]{grid-column:1/-1;grid-row:2;height:44px!important;min-height:44px!important}
}
body aside :is(.inspectorFold,.animationFold){border:1px solid var(--studio-edge)!important;border-radius:6px!important;background:transparent!important;margin:12px 0 0!important;padding:0!important;overflow:hidden}
body aside :is(.inspectorFold,.animationFold)>summary{display:list-item!important;list-style:disclosure-closed!important;min-height:40px!important;box-sizing:border-box;padding:10px 12px!important;background:transparent!important;color:var(--studio-copy)!important;font:500 13px/20px var(--ui-font)!important;cursor:pointer}
body aside :is(.inspectorFold,.animationFold)[open]>summary{list-style:disclosure-open!important;border-bottom:1px solid var(--studio-edge);margin-bottom:12px}
body aside .inspectorFoldBody{padding:0 12px 12px!important}
body aside .animationFold>:not(summary){margin-left:12px!important;margin-right:12px!important}
body aside .animationFold>:last-child{margin-bottom:12px!important}
body aside #posterWorkspace :is(#pwTemplates,#pwCanvasSettings){min-height:40px!important;padding:8px 10px!important;border-color:var(--studio-edge)!important;background:transparent!important;margin-bottom:8px!important;font-size:13px!important}
body aside #posterWorkspace #pwTemplates:hover,body aside #posterWorkspace #pwCanvasSettings:hover{background:var(--studio-rail)!important}
body aside #posterWorkspace .pw-layer{min-height:40px;gap:4px!important}
body aside #posterWorkspace .pw-layer button{font-size:13px!important}
body aside #posterWorkspace .pw-toolbar button{width:36px!important;min-height:36px!important}
body aside #posterWorkspace .pw-add{padding:8px 0;margin-bottom:8px}
body aside #posterWorkspace .pw-export button{min-height:40px!important;font-size:13px!important;padding:8px 12px!important}
body aside #posterWorkspace #pwSaveState{font-size:11px;margin:8px 0}
@media(pointer:coarse){body aside #posterWorkspace :is(button,#pwTemplates,#pwCanvasSettings,.pw-toolbar button,.pw-export button){min-height:44px!important}body aside #posterWorkspace .pw-toolbar button{width:44px!important}}
body[data-ux-step] aside #workflowGuide{padding:8px 12px!important;min-height:0!important;gap:0!important;border:0!important;background:transparent!important}
body[data-ux-step] aside #workflowGuide #workflowNext{display:flex!important;align-items:center;justify-content:space-between;width:100%;max-width:none!important;min-height:44px!important;padding:10px 14px!important;margin:0!important;border:1px solid var(--studio-edge)!important;border-radius:6px!important;background:var(--studio-rail)!important;color:var(--studio-copy)!important;font:500 13px var(--ui-font)!important;text-align:left!important;cursor:pointer}
body[data-ux-step] aside #workflowGuide #workflowNext:hover{border-color:var(--ux-action)!important}
body[data-ux-step] aside #workflowGuide #workflowNext:focus-visible{outline:2px solid var(--ux-action);outline-offset:2px}
body[data-ux-step] aside #workflowGuide #workflowNext[hidden],body[data-ux-step] aside #workflowGuide #workflowNext:disabled{display:none!important}
body[data-ux-step] aside #styleAccess{padding:12px!important;gap:12px!important;align-items:center!important;border:0!important;border-bottom:1px solid var(--studio-edge)!important}
body[data-ux-step] aside #styleAccess .currentLook{gap:4px!important;flex:1 1 120px!important}
body[data-ux-step] aside #activeStyleName{font-size:16px!important;line-height:1.3!important;font-weight:500!important}
body[data-ux-step] aside #currentLookDescription{display:none!important}
body[data-ux-step] aside #currentLookLabel{font-size:11px!important;color:var(--studio-muted)!important}
body[data-ux-step] aside #styleAccess #btnStyleParams{min-height:44px!important;padding:8px 12px!important;border-radius:6px!important;font-size:12px!important}
body #stage>#tlOpen{position:absolute;left:16px;bottom:40px;z-index:35;display:inline-flex!important;align-items:center;gap:8px;width:auto;min-height:44px;padding:0 12px;border:1px solid var(--studio-edge);border-radius:6px;background:var(--studio-surface);color:var(--studio-copy);box-shadow:none;font:500 12px var(--ui-font);cursor:pointer}
body #stage>#tlOpen svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
body #stage>#tlOpen[aria-expanded="true"]{border-color:var(--ux-action);color:var(--studio-copy)}
body #stage>#tlOpen:focus-visible{outline:2px solid var(--ux-action);outline-offset:3px}
body.source-empty #stage>#tlOpen,body[data-ux-step="poster"] #stage>#tlOpen,body[data-ux-step="draw"] #stage>#tlOpen{display:none!important}
body aside .flow{gap:0!important;border:0!important;border-bottom:1px solid var(--studio-edge)!important;border-radius:0!important;background:var(--studio-surface)!important;padding:0!important}
body aside .flow .fbtn{position:relative;min-height:52px;min-width:0;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:var(--studio-muted)!important;padding:7px 3px!important;gap:5px!important}
body aside .flow .fbtn.active{color:var(--studio-copy)!important}
body aside .flow .fbtn.active::after{content:'';position:absolute;bottom:0;left:10px;right:10px;height:2px;background:var(--ux-action)}
body aside .flow .fbtn:hover:not(.active){background:var(--studio-rail)!important;color:var(--studio-copy)!important}
body aside .flow .fbtn .ficon{width:18px;height:18px}
body aside .flow .fbtn .flabel{font-size:11px;line-height:1.2;font-weight:500;letter-spacing:0}
body aside .flow .fbtn:focus-visible{outline:2px solid var(--ux-action);outline-offset:-3px}
@media(max-width:680px){
 body #stage>#tlOpen{left:12px;bottom:72px;min-height:44px}
 body.timeline-open #tlDock{position:fixed;left:0;right:0;bottom:var(--mobile-nav-h,72px);max-height:40dvh;overflow:auto;z-index:120}
 body.timeline-open #stage>#tlOpen{visibility:hidden}
 body aside .flow .fbtn{min-height:56px}
}

/* Library surfaces share one rhythm. The previews, not extra chrome, lead. */
html[data-theme] body[data-ux-step] aside #mobileInspector #styleGroup,html[data-theme] body aside #styleGroup :is(.styleControlDeck,#presets>.cath){background:transparent!important}
body aside #styleGroup .styleControlDeck{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;margin:0!important;padding:0!important;border:0!important;background:transparent!important}
body aside #styleStrengthControl{margin:0!important;min-width:0;padding:0!important}
body aside #styleStrengthControl label{margin:0!important;font-size:12px!important;line-height:20px}
body aside #styleStrengthControl input[type="range"]{margin:0!important;min-height:24px;height:24px;width:100%}
body aside #styleGroup .styleQuickActions{margin:0!important;padding:0!important;border:0!important;display:flex!important;align-items:center}
body aside #styleGroup #btnRandomAll{width:auto!important;min-height:44px!important;padding:8px 12px!important;margin:0!important;font-size:12px!important;background:transparent!important}
body aside #styleGroup .styleCatalogHeader{display:none!important}
body aside #styleGroup :is(.styleFilterBar,.styleCatalogMeta,.brushLab){grid-column:1/-1}
body aside #styleGroup .styleFilterBar{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,.95fr)!important;gap:8px!important;margin:0!important}
body aside #styleGroup :is(#styleSearch,#styleCategory){width:100%;min-width:0;height:44px!important;min-height:44px!important;margin:0!important;border:1px solid var(--studio-edge)!important;border-radius:6px!important;background:var(--studio-rail)!important;color:var(--studio-copy)!important;font:400 12px/1.4 var(--ui-font)!important;box-shadow:none!important}
body aside #styleCategory{padding:8px 28px 8px 10px!important;text-overflow:ellipsis}
body aside #styleSearch{padding:8px 34px 8px 30px!important}
body aside #styleGroup .styleCatalogMeta{display:flex!important;align-items:center;justify-content:space-between;margin:0!important;min-height:24px;gap:8px;font-size:12px!important;line-height:1.4!important;color:var(--studio-muted)}
body aside #styleGroup .styleCatalogMeta:before,body aside #styleGroup .styleCatalogMeta:after{display:none!important}
body aside #styleResultCount{font-variant-numeric:tabular-nums}
body aside :is(#resetStyleFilters,#pwResetTemplateFilters){width:auto;min-height:28px!important;padding:2px 0!important;border:0!important;background:transparent!important;color:var(--studio-copy);text-decoration:underline;text-underline-offset:3px;font:400 12px/1.4 var(--ui-font)!important}
body aside #clearStyleSearch{height:40px;width:32px;top:2px;right:2px;transform:none}
body aside :is(#styleEmpty,#resetStyleFilters,#clearStyleSearch,#styleSearchHint)[hidden]{display:none!important}
body aside #presets{margin-top:8px!important;padding:0!important}
body aside #presets .cath{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 0 10px!important;padding:0!important;border:0!important;background:none!important;color:var(--studio-muted)!important;font:500 12px/1.4 var(--ui-font)!important;letter-spacing:normal!important}
body aside #presets .cath:first-child{margin-top:8px!important}
body aside #presets .cath:before{display:none!important}
body aside #presets .cath:after{content:attr(data-count)!important;position:static!important;flex:none!important;width:auto!important;height:auto!important;background:none!important;border:0!important;font-variant-numeric:tabular-nums;color:var(--studio-muted)}
body aside #styleGroup #presets>.presets{gap:8px!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
body aside #styleGroup #presets .preset{display:flex!important;flex-direction:column;align-items:stretch!important;justify-content:flex-start;gap:8px!important;min-height:0!important;padding:6px 6px 8px!important;border-radius:6px!important;background:transparent!important;box-shadow:none!important;text-align:left!important}
body aside #presets .styleThumbnail{width:100%!important;height:auto!important;aspect-ratio:4/3;object-fit:cover;border-radius:3px;background:var(--studio-rail)}
body aside #presets .styleCardName{display:block;min-height:32px;padding:0 3px;font:500 12px/16px var(--ui-font);color:var(--studio-copy);overflow-wrap:anywhere;text-wrap:pretty}
body aside #presets .preset small,body aside #presets .preset:is(.active,:hover,:focus-visible) small{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important}
body aside #styleGroup #presets .preset.active{border-color:var(--ux-action)!important;box-shadow:inset 0 -2px var(--ux-action)!important}
body aside #presets .stylePreviewStatus{top:32px;left:12px;right:12px;width:auto;max-height:none;font-size:11px}
body aside .libraryEmpty{padding:24px 12px;border:1px dashed var(--studio-edge);border-radius:6px;margin:16px 0;text-align:center;color:var(--studio-muted);font:400 12px/1.5 var(--ui-font)}
body aside .libraryEmpty p{margin:0 0 8px;color:var(--studio-copy);font-weight:500}
body aside :is(#styleSearch,#styleCategory,#resetStyleFilters,#clearStyleSearch):focus-visible{outline:2px solid var(--ux-action)!important;outline-offset:2px}
body aside :is(#styleSearch,#pwTemplateSearch)::-webkit-search-cancel-button{display:none}
html[data-theme="light"] body aside :is(#styleSearch,#styleCategory,#resetStyleFilters,#clearStyleSearch,#pwTemplateSearch,#pwTemplateCategory,#pwResetTemplateFilters,#pwClearTemplateSearch,.pw-template):focus-visible{outline-color:var(--studio-copy)!important}
@media(max-width:680px){
 body[data-ux-step="style"]:not(.source-empty):not(.mobile-sheet-collapsed){--mobile-sheet-h:clamp(300px,52dvh,480px)}
 body aside #styleGroup :is(#styleSearch,#styleCategory){font-size:16px!important}
 body aside #styleGroup .styleFilterBar{grid-template-columns:1fr!important}
 body aside #styleSearchHint{display:none!important}
 body aside #resetStyleFilters{min-height:44px!important}
}