/* FRAY interface extensions. */
body #tlDock:not(.editing) #tlDockInner{padding:2px 16px 3px}
body #tlDock:not(.editing) #tlTransport{margin:0;gap:5px;min-height:27px}
body #tlDock:not(.editing) #tlViewport,body #tlDock:not(.editing) .tlField{display:none!important}
body #tlDock:not(.editing) #tlScrubber{height:6px!important;min-height:6px!important;margin:1px 0 0!important;padding:0!important;border-radius:5px;background:linear-gradient(to right,var(--ux-action) 0 var(--playhead,0%),var(--line2) var(--playhead,0%) 100%);appearance:none;-webkit-appearance:none}
body #tlDock:not(.editing) #tlScrubber::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(to right,var(--ux-action) 0 var(--playhead,0%),var(--line2) var(--playhead,0%) 100%)}
body #tlDock:not(.editing) #tlScrubber::-moz-range-track{height:4px;border-radius:4px;background:linear-gradient(to right,var(--ux-action) 0 var(--playhead,0%),var(--line2) var(--playhead,0%) 100%)}
body #tlDock:not(.editing) #tlScrubber::-webkit-slider-thumb{width:10px;height:10px;background:var(--panel);border:2px solid var(--ux-action);box-shadow:0 1px 4px #0007}
body #tlDock:not(.editing) #tlScrubber::-moz-range-thumb{width:8px;height:8px;background:var(--panel);border:2px solid var(--ux-action);box-shadow:0 1px 4px #0007}
body #tlDock:not(.editing) .tp{min-height:27px;height:27px;padding:3px 7px}
body #tlDock:not(.editing) #tpCounter{font-size:11px;min-width:92px}
body #tlDock:not(.editing) #tlEditToggle{min-width:100px}
@media(max-width:640px){body #tlDock:not(.editing) #tlDockInner{padding:5px 8px}body #tlDock:not(.editing) :is(#tpStart,#tpEnd){display:none}body #tlDock:not(.editing) .tp{min-height:34px;height:34px}}
#tlScrubber::-webkit-slider-runnable-track{height:5px;border-radius:5px;background:var(--line2)}
#tlScrubber::-moz-range-track{height:5px;border-radius:5px;background:var(--line2)}
.tlFxClip{position:absolute;top:3px;height:28px;overflow:hidden;border:1px solid #768291;border-radius:5px;background:linear-gradient(110deg,#303743,#454e5d);color:#f4f6fa;touch-action:none;cursor:pointer;isolation:isolate}
.tlFxClip[data-type="scanlines"]{border-color:#5cb8c4;background:linear-gradient(110deg,#17464e,#287782)}
.tlFxClip[data-type="vignette"]{border-color:#a78be0;background:linear-gradient(110deg,#42345e,#68518b)}
.tlFxClip[data-type="lightleak"]{border-color:#e3a46c;background:linear-gradient(110deg,#794c3e,#b66a55)}
.tlFxClip .clipLabel{position:relative;z-index:2}
.tlFxClip .fxFadeZone{position:absolute;z-index:1;top:0;bottom:0;pointer-events:none}
.tlFxClip .fxFadeZone.left{left:0;width:var(--fx-fade-in,0%);background:linear-gradient(90deg,rgba(9,12,17,.78),transparent)}
.tlFxClip .fxFadeZone.right{right:0;width:var(--fx-fade-out,0%);background:linear-gradient(270deg,rgba(9,12,17,.78),transparent)}
.tlFxClip .fxStrength{position:absolute;z-index:2;left:0;bottom:0;width:var(--fx-strength,0%);height:2px;background:currentColor;opacity:.88;pointer-events:none}
.tlFxClip.active{outline:2px solid #c9ed84;outline-offset:1px}
#tlDock.editing #tlEditPanel>.tlControlRow,#tlDock.editing #tlEditPanel>.tlToolGroup{margin:0 0 7px;border:1px solid var(--line);border-radius:7px;background:var(--panel)}
#tlDock.editing #tlEditPanel>.tlPrimaryTools{gap:8px 12px;padding:8px 10px;border-left:3px solid var(--ux-action)}
.tlToolGroup{overflow:hidden;border-left:3px solid #69c5cb!important}
.tlToolGroup#tlKeyTools{border-left-color:#a88bdc!important}
.tlToolGroup>summary{position:relative;display:flex;align-items:center;min-height:34px;padding:5px 34px 5px 10px;cursor:pointer;list-style:none;font:600 12px/1.35 var(--sans);color:var(--ink)}
.tlToolGroup>summary::-webkit-details-marker{display:none}
.tlToolGroup>summary::after{content:'+';position:absolute;right:12px;top:50%;transform:translateY(-50%);font:600 16px/1 var(--sans);color:var(--dim)}
.tlToolGroup[open]>summary::after{content:'−'}
.tlToolGroup>.tlControlRow{gap:8px 12px;padding:4px 10px 9px;margin:0;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent}
#tlDock.editing .tEye{min-width:31px;height:21px;padding:1px 4px;border:1px solid var(--line2);border-radius:5px;background:var(--field);color:var(--ink);font:700 9px/1 var(--sans);cursor:pointer}
#tlDock.editing .tlTrack.muted .tEye{border-color:#bb8888;color:#d49a9a}
#tlDock.editing .tlTrackName .tName{min-width:0;overflow:hidden;text-overflow:ellipsis}
#tlMoreTools{position:relative;flex:0 0 auto;align-self:flex-start}
#tlMoreTools>summary{display:flex;align-items:center;gap:6px;min-height:32px;padding:5px 9px;border:1px solid var(--line2);border-radius:6px;background:var(--field);color:var(--ink);font:600 12px/1.2 var(--sans);cursor:pointer;list-style:none}
#tlMoreTools>summary::-webkit-details-marker{display:none}
#tlMoreTools>summary::after{content:'⌄';color:var(--dim);font-size:11px}
#tlMoreTools[open]>summary{border-color:var(--ux-action)}
.tlMorePanel{position:static;display:flex;flex-direction:column;align-items:stretch;gap:6px;min-width:190px;margin:5px 0 2px;padding:9px;border:1px solid var(--line2);border-radius:8px;background:var(--panel);box-shadow:none}
.tlMorePanel .tp{justify-content:flex-start;text-align:left}
.tlMorePanel .tlField{justify-content:space-between;padding:3px 2px}
.tlMorePanel .tlField select{min-height:30px}
#tlDock:not(.editing) #tlMoreTools{display:none}
#tlDock:not(.editing) #tlEditToggle{margin-left:auto}
#tlDock.editing .tEye{flex:none}
#tlDock.editing .clipEdge{width:12px;background:linear-gradient(90deg,transparent,#e4ebfa55,transparent)}
#tlDock.editing .clipEdge::after{content:'';position:absolute;top:7px;bottom:7px;left:5px;width:2px;border-radius:2px;background:#f1f4f8;opacity:.85}
#tlDock.editing .tlToolGroup .tlField{min-width:150px}
#tlDock.editing .tlTrackName{position:sticky;left:0;z-index:4;display:flex;align-items:center;gap:6px;width:var(--tl-label);min-width:var(--tl-label);box-sizing:border-box;height:100%;padding:0 7px;text-align:left;overflow:hidden;background:var(--panel);border-right:1px solid var(--line);color:var(--dim)}
#tlDock.editing .tlTrack{align-items:stretch}
#tlDock.editing .tlTrackLane{flex:1 1 auto;min-width:0}
#tlDock.editing #tlRuler{position:sticky;left:var(--tl-label);z-index:2}
@media(max-width:720px){
  #tlDock.editing #tlEditPanel>.tlPrimaryTools,#tlDock.editing #tlEditPanel .tlControlRow{gap:7px;padding:7px;}
  .tlMorePanel{min-width:min(250px,calc(100vw - 24px))}
  #tlDock.editing #tlEditPanel .tlField{flex:1 1 42%;min-width:120px;flex-wrap:wrap;white-space:normal}
  #tlDock.editing #tlEditPanel .tlField select{max-width:100%}
  #tlDock.editing #tlEditPanel .tlControlRow .tlHint{flex:1 1 100%}
  #tlDock.editing .tlTrackName{width:var(--tl-label);min-width:var(--tl-label);padding:0 4px;font-size:10px}
}
#tlDock{max-height:46dvh;overflow-y:auto;box-shadow:0 -8px 24px #0002}
.previewSpeedHint{font-size:12px;line-height:1.4;color:var(--dim);margin:5px 0 0}
#tlDockInner{padding:10px 16px}
#tlTransport{gap:6px;align-items:center}
#tlTransport .tp,#tlEditPanel .tp{width:auto;min-width:34px;min-height:34px;padding:6px 10px;border-radius:6px;font-size:13px;white-space:nowrap}
body #tlDock .tp{border:1px solid var(--line2);background:var(--field);color:var(--ink);font-family:var(--sans);cursor:pointer}
body #tlDock .tp:disabled{opacity:.4;cursor:not-allowed}
body #tlDock .tp:hover:not(:disabled){border-color:var(--ux-action)}
body #tlDock :is(#tpPlayMode,#tlKeyEase){width:auto;min-width:110px;max-width:150px;min-height:34px;padding:5px 8px;flex:0 0 auto;font:13px var(--sans);border:1px solid var(--line2);border-radius:5px;background:var(--field);color:var(--ink)}
.tlField{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--dim);white-space:nowrap}
.tlField input,.tlField select{width:auto;min-height:32px;padding:4px 7px;border:1px solid var(--line2);border-radius:5px;background:var(--field);color:var(--ink);font:inherit}
.tlField input{width:70px;font-variant-numeric:tabular-nums}
#tlClipStyle{max-width:200px}
#tlEditPanel{border-top:1px solid var(--line);padding:10px 0 3px;margin-top:8px}
.tlControlRow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:7px}
#tlClipInfo,#tlEditHint{font-size:12px;color:var(--dim);margin:0}
.tlEditIntro{display:flex;align-items:baseline;gap:12px;min-height:27px;margin:0 2px 5px;color:var(--ink);font:600 12px/1.3 var(--sans)}
#tlEditHint{font-weight:400;color:var(--dim)}
#tlDock.editing #tlEditPanel>[hidden]{display:none!important}
#tlDock.editing #tlEditPanel>.tlPrimaryTools{margin-bottom:6px}
#tlDock.editing .tlToolGroup>summary{min-height:31px}
#tlDock.editing .tlToolGroup>.tlControlRow{padding:6px 10px 8px}
#tlDock.editing .tlDanger{border-color:#744e52;color:#f0b9bd}
#tlDock.editing .tlDanger:hover:not(:disabled){border-color:#d17980;background:#382326}
#tlDock.editing #tlFxTools .tlControlRow:nth-of-type(2) .tlField{flex:1 1 180px}
#tlDock.editing #tlEditPanel{padding:4px 0 0;margin-top:4px}
#tlDock.editing .tlEditIntro{min-height:19px;margin:0 2px 3px;gap:8px;font-size:11px}
#tlDock.editing #tlEditPanel>.tlControlRow,#tlDock.editing #tlEditPanel>.tlToolGroup{margin-bottom:4px;border-radius:6px}
#tlDock.editing #tlEditPanel>.tlPrimaryTools{gap:5px 8px;padding:5px 8px}
#tlDock.editing .tlToolGroup>summary{min-height:25px;padding:2px 28px 2px 8px;font-size:11px}
#tlDock.editing .tlToolGroup>.tlControlRow{gap:5px 8px;padding:4px 8px;margin:0}
#tlDock.editing #tlEditPanel .tp{min-height:27px;height:27px;padding:3px 8px;font-size:12px}
#tlDock.editing #tlEditPanel .tlField{gap:5px;font-size:11px}
#tlDock.editing #tlEditPanel .tlField input,#tlDock.editing #tlEditPanel .tlField select{min-height:26px;padding:2px 6px}
#tlDock.editing #tlEditPanel .tlField input[type=range]{width:96px;min-height:18px;padding:0}
#tlDock.editing #tlFxTools .tlControlRow:nth-of-type(2){display:flex;justify-content:flex-start;gap:8px 20px}
#tlDock.editing #tlFxTools .tlControlRow:nth-of-type(2) .tlField{flex:0 1 205px;min-width:170px}
#tlDock.editing #tlTrimFields{gap:5px;padding:5px 8px}
#tlDock.editing #tlTrimFields .tlField input{width:58px}
#tlDock.editing .tlTrack.selectedTrack .tlTrackName{color:var(--ink);background:color-mix(in srgb,var(--ux-action) 20%,var(--panel));border-right-color:var(--ux-action)}
#tlDock.editing .tlTrack.selectedTrack .tName{color:var(--ink);font-weight:700}
#tlDock.editing .tlTrack.selectedTrack .tEye{border-color:var(--ux-action)}
#tlScrubber{display:block;width:100%;margin:9px 0;height:16px;cursor:ew-resize}
#tlViewport{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
#tlContent{width:100%;min-width:100%;position:relative;padding-bottom:2px}
body #tlDock .tlTrack{min-height:38px}
body #tlDock .tlTrackLane{height:38px}
body #tlDock .tlClip{top:4px;height:30px;border-radius:5px;border:1px solid #8293b1;color:var(--ink);overflow:hidden;touch-action:none}
body #tlDock .tlClip.active{border:2px solid var(--ux-action);box-shadow:inset 0 0 0 1px #0004}
body #tlDock .clipLabel{font-size:12px;padding:5px 13px;line-height:18px}
body #tlDock .clipEdge{width:12px;touch-action:none;background:#e4ebfa22}
body #tlDock .tlTrackName{font-size:12px;background:var(--panel)}
body #tlDock .tEye{font-size:18px;cursor:pointer}
body #tlDock .kfDot{width:12px;height:12px;touch-action:none}
body #tlDock .tlMark{width:16px;touch-action:none}
body #tlDock .rmark{font-size:12px}
html[data-theme="light"] body #tlDock :is(.tlTrackLane,#tlDockBar){background:#e4eaf1;border-color:#bac5d3}
@media(max-width:640px){#tlDockInner{padding:8px}.tlField{font-size:12px}#tpCounter{min-width:100px!important}#tlTransport{gap:4px}#tlEditPanel{padding-top:8px}#tlDock{max-height:48dvh}#tlEditHint{line-height:1.4}}
@media(max-width:720px){#tlDock.editing #tlEditPanel>.tlPrimaryTools,#tlDock.editing #tlEditPanel .tlControlRow{gap:5px;padding:5px}#tlDock.editing #tlEditPanel .tlField{flex:1 1 30%;min-width:105px;flex-wrap:nowrap;white-space:normal}#tlDock.editing #tlFxTools .tlControlRow:nth-of-type(2) .tlField{flex:1 1 45%;min-width:145px}}
/* Make the timeline read like an editor, not a control panel. */
.tlMorePanel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;min-width:320px}
.tlMorePanel .tlStepControls{grid-column:1/-1;display:flex;align-items:center;gap:6px;color:var(--dim);font-size:12px}
.tlStepControls span{flex:1}
.tlMorePanel .tlField{min-width:0;gap:8px}
.tlMorePanel .tlField select{max-width:130px}
.tlAdvancedFx{margin:0;color:var(--dim);font-size:11px;flex:0 0 auto}
.tlAdvancedFx>summary{cursor:pointer;padding:3px 0;list-style:none}
.tlAdvancedFx>summary::-webkit-details-marker{display:none}
.tlAdvancedFx>summary::after{content:'+';float:right;color:var(--dim)}
.tlAdvancedFx[open]>summary::after{content:'−'}
.tlAdvancedFx .tlControlRow{border:0!important;padding:2px 0 4px!important;margin:0!important;background:transparent!important}
#tlDock.editing #tlFxTools .tlControlRow:nth-of-type(2) .tlField{flex:0 1 205px;min-width:170px}
#tlDock.editing #tlFxTools .tlControlRow:nth-of-type(2) input[type=range]{width:125px}
#tlEditToggle{min-width:105px}
@media(max-width:720px){.tlMorePanel{min-width:min(300px,calc(100vw - 24px));grid-template-columns:1fr}.tlMorePanel .tlStepControls{grid-column:auto}.tlMorePanel .tlField{flex-wrap:nowrap}#tlDock.editing #tlFxTools .tlControlRow:nth-of-type(2) .tlField{flex:1 1 100%;min-width:0}}
/* Shared interface themes; artwork canvases are never recolored. */
:root{--text:var(--ink);--surface:#191c23;--field:#13171d}
html{color-scheme:dark}
html[data-theme="light"]{color-scheme:light;--bg:#edf0f3;--bg2:#f4f6f8;--panel:#fff;--panel2:#f4f6f8;--surface:#fff;--field:#f7f9fb;--ink:#202b3b;--text:#202b3b;--dim:#536174;--dim2:#5f6b7c;--line:#d3dae3;--line2:#bac5d3;--ux-action:#245abb;--ux-action-ink:#fff;--ux-selected:#5a45a6;--ux-selected-bg:#eee9fb;--ux-enabled:#24694a;--ux-enabled-bg:#e5f3eb}
#themeToggle{white-space:nowrap}
#canvasTools{position:absolute;left:16px;top:15px;z-index:12;display:flex;gap:7px}
#canvasTools .btn{min-height:40px;padding:8px 14px;font-size:14px;background:#d9e6df;color:#172a22;border-color:#8ba297;box-shadow:0 3px 14px #0003}
#canvasTools .btn[aria-pressed="true"]{background:#b3d2c0;outline:2px solid #617e6d;outline-offset:2px}
body[data-ux-step="draw"] #brushLabPanel{display:block;max-width:none;margin:0;border:0;border-radius:0;background:transparent;padding:4px 3px}
body[data-ux-step="draw"] #brushLabPanel>summary{pointer-events:none;font-size:16px;padding-bottom:14px}
body[data-ux-step="draw"] #brushLabPanel>summary:after{display:none}
#brushBack{margin-bottom:10px;min-height:36px}
body[data-ux-step="draw"] .brushLab .brushMaterials{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
body[data-ux-step="draw"] .brushLab .brushMaterial{padding:10px}
body[data-ux-step="draw"] .brushLab .brushMaterial canvas{height:42px}
body[data-ux-step="draw"] .brushLab label{font-size:14px}
body[data-ux-step="draw"] .brushLab .brushRow .btn{min-height:38px;font-size:13px}
#exportProgress{position:fixed;z-index:10000;inset:auto 20px 30px;margin:auto;max-width:620px;display:flex;align-items:center;gap:16px;padding:16px 20px;border:1px solid var(--line2);border-radius:12px;background:var(--panel);color:var(--ink);box-shadow:0 10px 60px #0005;font-size:14px}
#exportProgressText{flex:1}#cancelExport{min-height:36px}
.exportAdvanced{margin-top:18px;border-top:1px solid var(--line);padding-top:12px}.exportAdvanced>summary{cursor:pointer;color:var(--dim);font-size:14px;margin-bottom:12px}
html[data-theme="light"] body,html[data-theme="light"] body :is(header,aside,.tabbar,.inspectorBody,#styleInspector,#siHead,.hmenu,.catmenu,#tlDock,#tlTransport,#layersBar,footer){background:var(--surface)!important;color:var(--ink)!important;border-color:var(--line)!important}
html[data-theme="light"] body .stage{background:#e3e8ee!important}
html[data-theme="light"] body :is(.btn,.fbtn,.preset,.citem,.motionCard,.nativeSceneCard,.motionBtn,.ratioBtn,.qsel,.shp3,.srcbtn,.brushMaterial,.tp){background:var(--field)!important;color:var(--ink)!important;border-color:var(--line2)!important;box-shadow:none}
html[data-theme="light"] body :is(input:not([type="range"]):not([type="color"]):not([type="checkbox"]),select,textarea,output,.txt){background:var(--field)!important;color:var(--ink)!important;border-color:var(--line2)!important}
html[data-theme="light"] body :is(.note,.note.on,.group,.mixLab,.cultureMaskPanel,.motionSection,.postMotionSection,.postMotion,.animationFold,.uxSubsection,.creativePanel,.variationBar,#brushLabPanel,#siBody>.group,#glowGroup .glowControls){background:var(--panel2)!important;border-color:var(--line)!important;color:var(--ink)!important}
html[data-theme="light"] body :is(.styleControlDeck,#styleGroup #presets>.cath){background:var(--surface)!important;color:var(--dim)!important}
html[data-theme="light"] body :is(.preset small,.note,.info,.hint,.resInfo,.ctl label,.fld>span,.brushLab p,.brushLab label,#workflowHint,#maskDescription,#brushModeNote,#activeStyleName,#siContext,.cath){color:var(--dim)!important}
html[data-theme="light"] body :is(.group>h2,#siBody>.group>h2,.motionSection h3,.brushLab>summary){background:transparent!important;color:var(--ink)!important;border-color:var(--line)!important}
html[data-theme="light"] body :is(.btn:hover,.preset:hover,.citem:hover,.brushMaterial:hover){background:#e6edf6!important}
html[data-theme="light"] body :is(.btn.on,.preset.active,.fbtn.active,.ratioBtn.active,.lbtn.active,.brushMaterial.on,.shp3.on,.citem.active){background:#e6edf9!important;color:#203f73!important;border-color:#6786b9!important}
html[data-theme="light"] body :is(#btnRandomMix,#btnMatrizRandom,#btnGif,#btnVideo,#newVariation,#btnSave){background:#245abb!important;color:#fff!important;border-color:#245abb!important}
html[data-theme="light"] body :is(#canvasTools .btn,#brushToggle.on){background:#dceee3!important;color:#18492f!important;border-color:#77a18a!important}
html[data-theme="light"] body header .brandWordmark{color:#263344!important}
html[data-theme="light"] body header .brandMark{filter:brightness(.2)}
html[data-theme="light"] body .flow .fbtn .flabel{color:inherit!important}
html[data-theme="light"] body #brushList button{color:var(--ink);border-color:var(--line2)}
html[data-theme="light"] body input[type="range"]{accent-color:#245abb}
html[data-theme="light"] body .variationHint{color:#536174}
html[data-theme="light"] body :is(aside,#styleInspector,#mixCompare) :is(summary,h2,h3,h4,p,label,.mixLabKicker,.mixLabLead,.mixHistoryHead,.mixLabToggles,.motionEyebrow,#maskSelectionLabel,#cacheStatus){color:var(--ink)!important}
html[data-theme="light"] body :is(.variationLabel,#copyVariation,.captureDots,#tlDockInfo,#tpCounter){color:var(--dim)!important}
html[data-theme="light"] body :is(.uxLanguage,#mixCompare,.fontSample,.mixCompareCard){background:var(--panel2)!important;color:var(--ink)!important;border-color:var(--line2)!important}
html[data-theme="light"] body .cwrap{box-shadow:0 12px 32px #26334420,0 0 0 1px #26334420}
html[data-theme="light"] body .uxLanguage .lbtn{color:var(--dim)}
html[data-theme="light"] body .uxLanguage .lbtn.active{color:#203f73;background:#e6edf9}
body #tlEditToggle{width:auto;min-width:108px;padding:6px 10px;white-space:nowrap}
body .frameRatioGrid .ratioBtn{min-height:32px;font-size:12px}
@media(max-width:980px){body header{flex:0 0 auto;height:auto;max-height:none}}
@media(max-width:640px){body .variationHint{display:none!important}}
@media(max-width:640px){#canvasTools{left:8px;top:8px}#canvasTools .btn{min-height:34px;padding:6px 10px}#exportProgress{inset:auto 8px 12px;padding:12px}.headerActions{gap:5px!important}#themeToggle{min-width:34px;padding:5px 8px}body .stage{padding-top:118px}body .variationBar{top:52px}}
body header .brandLine{display:flex;align-items:center;gap:11px;min-width:0;padding:4px 15px 4px 0;border-right:1px solid #ffffff30}
body header .brandMark{display:block;flex:0 0 44px;width:44px;height:44px;object-fit:contain;filter:brightness(0) invert(1);transform:rotate(-7deg)}
body header .brandWordmark{font-family:var(--ui-font,'Segoe UI',system-ui,-apple-system,BlinkMacSystemFont,sans-serif)!important;font-size:29px!important;font-weight:900!important;letter-spacing:-1.3px!important;text-transform:uppercase!important;line-height:1!important;margin:0;color:#fff!important;font-style:italic}
body header .brandLine .buildBadge{align-self:flex-start;margin:3px 0 0 -3px;padding:3px 5px;border:0;border-radius:0;background:#d9edaa;color:#151a10;font:700 11px/1.2 var(--ui-font,system-ui);transform:rotate(-5deg);letter-spacing:0}
html[data-theme="light"] body header .brandLine{border-right-color:#15201430}
html[data-theme="light"] body header .brandWordmark{color:#111710!important}
html[data-theme="light"] body header .brandLine .buildBadge{background:#25351c;color:#edffd8}
body header .brandWordmark::before,body header .brandWordmark::after{display:none!important}
.infoBrand{display:inline-flex;gap:8px;align-items:center;color:#f4eddb;text-decoration:none}
.infoBrand img{display:block;object-fit:contain;flex-shrink:0}
.infoBrand span{font:600 24px/1 var(--ui-font,'Segoe UI',system-ui,-apple-system,BlinkMacSystemFont,sans-serif);letter-spacing:normal;text-transform:lowercase}
@media(max-width:640px){body header .brandLine{gap:8px;padding-right:10px}body header .brandMark{width:36px;height:36px;flex-basis:36px}body header .brandWordmark{font-size:24px!important;letter-spacing:-1px!important}body header .brandLine .buildBadge{font-size:10px}}

/* 1840 · Signal Workbench — original FRAY controls, inspired by the
   compact interaction craft in Uiverse. Canvas pixels remain untouched. */
:root{
  --ui-font:'Unform Manrope',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ux-action:#d8f06a;--ux-action-ink:#171a10;
  --ux-selected:#c6adff;--ux-selected-bg:#30283e;
  --ux-enabled:#93e3b7;--ux-enabled-bg:#19362a;
  --studio-edge:#303835;--studio-surface:#151918;--studio-raised:#1d2321;
  --studio-rail:#101413;--studio-copy:#f1f1e9;--studio-muted:#a6ada7;
  --field:#111514;--line:#303835;--line2:#46504b;--ink:#f1f1e9;--dim:#a6ada7;
}
html{color-scheme:dark}
html[data-theme="light"]{
  color-scheme:light;
  --bg:#e9e9e2;--bg2:#f0f0e9;--panel:#f8f8f2;--panel2:#f0f1e9;
  --surface:#f8f8f2;--field:#fffef8;--ink:#202721;--text:#202721;--dim:#5e695f;--dim2:#717c72;
  --line:#d2d8cd;--line2:#aeb9ac;--ux-action:#445e22;--ux-action-ink:#fffef7;
  --ux-selected:#7259aa;--ux-selected-bg:#eee9f8;--ux-enabled:#286444;--ux-enabled-bg:#e3f2e8;
  --studio-edge:#d2d8cd;--studio-surface:#f8f8f2;--studio-raised:#f0f1e9;
  --studio-rail:#e9ebe2;--studio-copy:#202721;--studio-muted:#5e695f;
}
html:not([data-theme="light"]) body{background:#101313;color:#f1f1e9}
html:not([data-theme="light"]) body :is(header,aside,.tabbar,.inspectorBody,#styleInspector,#siHead,.hmenu,.catmenu,#tlDock,#tlTransport,#layersBar,footer){background:var(--studio-surface);border-color:var(--studio-edge)}
html:not([data-theme="light"]) body :is(.inspectorBody>.group.pop.open,#styleInspector #siBody>.group,.mixLab,.creativePanel,.variationBar,.motionSection,.animationFold,.brushLab){background:var(--studio-raised);border-color:var(--studio-edge);box-shadow:none}
html:not([data-theme="light"]) body .stage{background:#0e1110}
html[data-theme="light"] body :is(header,aside,.tabbar,.inspectorBody,#styleInspector,#siHead,.hmenu,.catmenu,#tlDock,#tlTransport,#layersBar,footer){background:var(--studio-surface)!important;color:var(--studio-copy)!important;border-color:var(--studio-edge)!important}
html[data-theme="light"] body .stage{background:#e2e5dc!important}
html[data-theme="light"] body :is(.inspectorBody>.group.pop.open,#styleInspector #siBody>.group,.mixLab,.creativePanel,.variationBar,.motionSection,.animationFold,.brushLab){background:var(--studio-raised)!important;border-color:var(--studio-edge)!important;box-shadow:none!important}
body :is(.btn,.fbtn,.srcbtn,.preset,.citem,.catbtn,.qsel,.shp3,.ratioBtn,.motionCard,.nativeSceneCard,.motionBtn,.brushMaterial,.tp,.lbtn,.tbtn,select,input:not([type="range"]):not([type="color"]):not([type="checkbox"]),textarea){
  border-radius:7px!important;transition:background-color .14s ease,border-color .14s ease,color .14s ease,transform .14s ease,box-shadow .14s ease;
}
body .btn{background:#202624;color:#e8ebe3;border-color:#3c4541;box-shadow:none}
body .btn:hover:not(:disabled){background:#2a322e;border-color:#849576;color:#f7f7ed;transform:translateY(-1px);box-shadow:none}
body .btn:active:not(:disabled){transform:translateY(1px) scale(.99);box-shadow:inset 0 1px 2px #0003}
body .btn:focus-visible,body :is(button,summary,input,select,textarea):focus-visible{outline:2px solid var(--ux-action);outline-offset:2px}
body :is(.btn,.fbtn,.srcbtn,.preset,.citem,.catbtn,.qsel,.shp3,.ratioBtn,.motionCard,.nativeSceneCard,.motionBtn,.brushMaterial,.tp):disabled{opacity:.44;cursor:not-allowed;transform:none;box-shadow:none}
body :is(input:not([type="range"]):not([type="color"]):not([type="checkbox"]),select,textarea,.txt){background:var(--field);color:var(--ink);border-color:var(--line2)}
body :is(input:not([type="range"]):not([type="color"]):not([type="checkbox"]),select,textarea,.txt):focus{border-color:var(--ux-action);box-shadow:0 0 0 2px color-mix(in srgb,var(--ux-action) 18%,transparent)}
body input[type="range"],body input[type="checkbox"]{accent-color:var(--ux-action)}
body :is(.btn.primary,#workflowNext:not(:disabled),#newVariation,#btnRandomMix,#btnMatrizRandom,#btnGif,#btnVideo,#btnSave){background:var(--ux-action);border-color:var(--ux-action);color:var(--ux-action-ink);font-weight:750;box-shadow:none}
body :is(.btn.primary,#workflowNext:not(:disabled),#newVariation,#btnRandomMix,#btnMatrizRandom,#btnGif,#btnVideo,#btnSave):hover:not(:disabled){background:color-mix(in srgb,var(--ux-action) 86%,white);border-color:var(--ux-action);color:var(--ux-action-ink)}
body #btnBrushWorkspace[aria-pressed="true"]{background:var(--ux-action);border-color:var(--ux-action);color:var(--ux-action-ink);box-shadow:none}
body header{border-bottom:1px solid var(--studio-edge)}
body header .brandMark{filter:brightness(0) saturate(100%) invert(88%) sepia(22%) saturate(831%) hue-rotate(25deg) brightness(104%) contrast(95%)}
body header .brandLine{border-right-color:var(--studio-edge)}
body header .brandLine .buildBadge{background:var(--ux-action);color:var(--ux-action-ink);transform:none}
body .flow{gap:4px;padding:4px;border:1px solid var(--studio-edge);border-radius:9px;background:var(--studio-rail)}
body .flow .fbtn{min-width:0;min-height:39px;padding:7px 6px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--studio-muted);box-shadow:none}
body .flow .fbtn .fnum{display:none}
body .flow .fbtn .flabel{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:650;color:inherit}
body .flow .fbtn .flabel:before{display:inline-block;min-width:15px;text-align:center;font-size:15px;line-height:1;color:var(--studio-muted)}
body #stepSource .flabel:before{content:'◈'}
body #stepStyle .flabel:before{content:'✳'}
body #stepAnimate .flabel:before{content:'∿'}
body #stepExport .flabel:before{content:'↥'}
body .flow .fbtn.active{background:var(--ux-selected-bg);border-color:color-mix(in srgb,var(--ux-selected) 55%,transparent);box-shadow:inset 0 -2px 0 var(--ux-selected);color:var(--studio-copy)}
body .flow .fbtn.active .flabel,body .flow .fbtn.active .flabel:before{color:var(--studio-copy)}
body .flow .fbtn:not(.active):hover{background:color-mix(in srgb,var(--ux-action) 8%,var(--studio-rail));border-color:var(--studio-edge);color:var(--studio-copy)}
body .flow .fbtn:not(.locked) .flabel:before{color:var(--ux-action)}
body .tabbar{border-bottom:1px solid var(--studio-edge);box-shadow:none}
body .inspectorBody>.group.pop.open,body #styleInspector #siBody>.group{border-radius:9px;border-color:var(--studio-edge);box-shadow:none}
body .inspectorBody>.group>h2,body #styleInspector #siBody>.group>h2{color:var(--studio-copy);border-color:var(--studio-edge)}
body :is(.preset,.citem,.srcbtn,.shp3,.motionCard,.nativeSceneCard,.motionBtn,.brushMaterial,.ratioBtn,.qsel){background:var(--studio-raised);border-color:var(--studio-edge);color:var(--studio-copy);box-shadow:none}
body :is(.preset,.citem,.srcbtn,.shp3,.motionCard,.nativeSceneCard,.motionBtn,.brushMaterial,.ratioBtn,.qsel):hover:not(:disabled){background:color-mix(in srgb,var(--ux-action) 7%,var(--studio-raised));border-color:color-mix(in srgb,var(--ux-action) 55%,var(--studio-edge));color:var(--studio-copy);transform:translateY(-1px);box-shadow:none}
body :is(.preset.active,.citem.active,.srcbtn.on,.shp3.on,.motionCard.active,.nativeSceneCard.active,.motionBtn.active,.brushMaterial.on,.ratioBtn.active,.qsel.active){background:var(--ux-selected-bg);border-color:var(--ux-selected);box-shadow:inset 3px 0 0 var(--ux-selected);color:var(--studio-copy)}
body #styleGroup #presets .preset.active:after{color:var(--ux-selected)}
body .note,body .note.on{border-color:var(--studio-edge)}
body #tlDock{border-top:1px solid var(--studio-edge);box-shadow:0 -8px 22px #0002}
body #tlDock .tlClip.active{border-color:var(--ux-action);box-shadow:inset 0 0 0 1px #0005}
body #tlDock .tlFxClip.active{outline-color:var(--ux-selected)}
body #tlDock .tlTrack.selectedTrack .tlTrackName{background:var(--ux-selected-bg);border-right-color:var(--ux-selected)}
body #tlDock.editing .tlToolGroup{border-left-color:var(--ux-action)!important}
html[data-theme="light"] body .btn{background:#f4f5ee!important;color:#273029!important;border-color:#c9d0c3!important}
html[data-theme="light"] body .btn:hover:not(:disabled){background:#e8ecdf!important;border-color:#758a62!important;color:#172018!important}
html[data-theme="light"] body :is(.btn.primary,#workflowNext:not(:disabled),#newVariation,#btnRandomMix,#btnMatrizRandom,#btnGif,#btnVideo,#btnSave){background:var(--ux-action)!important;border-color:var(--ux-action)!important;color:var(--ux-action-ink)!important}
html[data-theme="light"] body #btnBrushWorkspace[aria-pressed="true"]{background:var(--ux-action)!important;border-color:var(--ux-action)!important;color:var(--ux-action-ink)!important}
html[data-theme="light"] body .flow{background:var(--studio-rail);border-color:var(--studio-edge)}
html[data-theme="light"] body .flow .fbtn{background:transparent;color:var(--studio-muted)}
html[data-theme="light"] body .flow .fbtn.active{background:var(--ux-selected-bg)!important;border-color:#aa98d3!important;box-shadow:inset 0 -2px 0 var(--ux-selected)!important;color:#272235!important}
html[data-theme="light"] body .flow .fbtn.active .flabel,html[data-theme="light"] body .flow .fbtn.active .flabel:before{color:#272235!important}
html[data-theme="light"] body :is(.preset,.citem,.srcbtn,.shp3,.motionCard,.nativeSceneCard,.motionBtn,.brushMaterial,.ratioBtn,.qsel){background:#f4f5ee!important;border-color:#c9d0c3!important;color:#273029!important}
html[data-theme="light"] body :is(.preset.active,.citem.active,.srcbtn.on,.shp3.on,.motionCard.active,.nativeSceneCard.active,.motionBtn.active,.brushMaterial.on,.ratioBtn.active,.qsel.active){background:var(--ux-selected-bg)!important;border-color:var(--ux-selected)!important;color:#29233a!important}
html[data-theme="light"] body :is(input:not([type="range"]):not([type="color"]):not([type="checkbox"]),select,textarea,.txt):focus{border-color:var(--ux-action)!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--ux-action) 20%,transparent)!important}
@media(max-width:640px){
  body .flow{gap:2px;padding:3px}
  body .flow .fbtn{min-height:40px;padding:6px 2px}
  body .flow .fbtn .flabel{gap:4px;font-size:11px}
  body .flow .fbtn .flabel:before{min-width:13px;font-size:14px}
  body :is(.btn,.srcbtn,.shp3,.motionBtn,.tp){min-height:38px}
}
@media(prefers-reduced-motion:reduce){body :is(button,summary,.preset,.citem,.brushMaterial,.motionCard,.nativeSceneCard,.srcbtn,.shp3){transition:none!important;scroll-behavior:auto!important}}