/* "Rows and squares" tab (js/workshop-studio.js, reworked 2026-10-01): header with the
   showcase type and row count -> sticky settings panel (tabs + create footer) -> live
   Steam-profile preview. Squares use Steam's real spacing: 122 px tiles, 4 px apart. */
.wsx{--wsx-cyan:var(--v2-cyan,#1fc9f1);--wsx-line:var(--v2-line,rgba(110,170,255,.2));--wsx-ink:var(--v2-ink,#e9f3ff);
  --wsx-muted:var(--v2-muted,rgba(214,229,250,.68));--wsx-panel:var(--v2-panel,#0a1330);--wsx-inset:rgba(5,10,28,.78);
  --wsx-top:118px;max-width:1680px;margin:auto;color:var(--wsx-ink);font-family:var(--v2-font,'Montserrat',system-ui,sans-serif)}
.wsx *{box-sizing:border-box}
.wsx [hidden]{display:none!important}
.wsx button{font-family:inherit}
.wsx .wsx-icon{display:inline-grid;place-items:center;width:20px;height:20px;flex:none}
.wsx .wsx-icon svg{width:100%;height:100%}
.wsx button:focus-visible,.wsx input:focus-visible,.wsx select:focus-visible,.wsx .wsx-sq:focus-visible{outline:2px solid var(--wsx-cyan);outline-offset:2px}

/* ------------------------------------------------------------------ header */
.wsx-head{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:14px 22px;margin:0 0 14px;padding:16px 20px;
  border:1px solid var(--wsx-line);border-radius:var(--v2-radius,14px);background:linear-gradient(120deg,rgba(31,201,241,.09),rgba(138,125,255,.07) 55%,rgba(5,10,28,.9))}
.wsx-head__kicker{font:800 10px/1 Consolas,monospace;letter-spacing:.16em;color:var(--wsx-cyan)}
/* The generic task chooser is hidden here, as on Process: the header is the chooser. */
body.page-tools:has(#tab-workshop.active) #toolTaskChooser{display:none!important}
.wsx-head__intro{margin:6px 0 0;max-width:640px;color:var(--wsx-muted);font-size:13px;line-height:1.5}
.wsx-type{display:flex;gap:8px}
.wsx-type__btn{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;min-width:206px;padding:10px 14px;
  border:1px solid rgba(110,170,255,.22);border-radius:12px;background:var(--wsx-inset);color:var(--wsx-muted);cursor:pointer;text-align:left;transition:border-color .15s,background .15s,color .15s}
.wsx-type__btn:hover{color:var(--wsx-ink);border-color:rgba(111,227,255,.4)}
.wsx-type__btn[aria-checked=true]{color:#fff;border-color:var(--wsx-cyan);background:linear-gradient(160deg,rgba(31,201,241,.2),rgba(138,125,255,.12));box-shadow:0 0 22px rgba(31,201,241,.14)}
.wsx-type__art{grid-row:1/3;display:grid;gap:3px;width:46px}
.wsx-type__art i{display:block;border-radius:2px;background:currentColor;opacity:.72}
.wsx-type__art--rows{grid-template-rows:14px 14px}
.wsx-type__art--squares{grid-template-columns:repeat(5,1fr);align-content:center}.wsx-type__art--squares i{aspect-ratio:1}
.wsx-type__btn[aria-checked=true] .wsx-type__art i{background:var(--wsx-cyan);opacity:1}
.wsx-type__name{font-weight:800;font-size:14px}
.wsx-type__hint{font-size:11px;opacity:.75}
.wsx-count{display:grid;gap:6px;justify-items:start}
.wsx-count__label{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--wsx-muted)}
.wsx-count__buttons{display:flex;gap:6px}
.wsx-count__btn{display:grid;grid-template-columns:auto auto;align-items:center;gap:7px;padding:8px 12px;border:1px solid rgba(110,170,255,.22);border-radius:10px;
  background:var(--wsx-inset);color:var(--wsx-muted);cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.wsx-count__btn b{font-size:15px}
.wsx-count__art{display:grid;gap:2px;width:18px}.wsx-count__art i{height:4px;border-radius:1px;background:currentColor;opacity:.75}
.wsx-count__btn:hover{color:var(--wsx-ink)}
.wsx-count__btn[aria-checked=true]{color:#fff;border-color:var(--wsx-cyan);background:linear-gradient(160deg,rgba(31,201,241,.2),rgba(61,123,255,.1))}
.wsx-count__btn[aria-checked=true] .wsx-count__art i{background:var(--wsx-cyan);opacity:1}

/* ------------------------------------------------------------------ body */
.wsx-body{display:grid;grid-template-columns:minmax(330px,390px) minmax(0,1fr);gap:16px;align-items:start}
.wsx-panel,.wsx-stage{border:1px solid var(--wsx-line);border-radius:var(--v2-radius,14px);background:var(--wsx-panel);box-shadow:0 18px 50px rgba(0,0,0,.28);min-width:0}
.wsx-panel{position:sticky;top:var(--wsx-top);display:flex;flex-direction:column;max-height:calc(100vh - var(--wsx-top) - 14px);overflow:hidden}
.wsx-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:8px;border-bottom:1px solid var(--wsx-line)}
.wsx-tab{position:relative;display:grid;justify-items:center;gap:4px;padding:9px 2px 8px;border:1px solid transparent;border-radius:10px;background:transparent;
  color:var(--wsx-muted);cursor:pointer;font-size:11px;font-weight:700;line-height:1.15;text-align:center;transition:background .15s,color .15s,border-color .15s}
.wsx-tab:hover{color:var(--wsx-ink);background:rgba(111,227,255,.06)}
.wsx-tab.is-active{color:#fff;border-color:rgba(111,227,255,.45);background:linear-gradient(160deg,rgba(31,201,241,.2),rgba(138,125,255,.12))}
.wsx-tab__dot{position:absolute;top:4px;right:5px;min-width:15px;height:15px;padding:0 4px;border-radius:8px;background:var(--wsx-cyan);color:#021018;font:800 9px/15px var(--v2-font,system-ui);font-style:normal}
.wsx-panel__body{flex:1 1 auto;min-height:120px;overflow:auto;overscroll-behavior:contain;padding:14px;scrollbar-width:thin}
.wsx-label{margin:14px 0 8px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#9fb6c9}
.wsx-label:first-child{margin-top:0}
.wsx-help{margin:8px 0 0;color:var(--wsx-muted);font-size:12px;line-height:1.45}
.wsx-help--top{margin:0 0 12px}
.wsx-note{margin:0 0 14px;padding:10px 12px;border-left:2px solid rgba(110,170,255,.4);border-radius:0 8px 8px 0;background:rgba(5,10,28,.6);color:var(--wsx-muted);font-size:12px;line-height:1.45}
.wsx-note.is-on{border-color:#d59bff;background:rgba(138,98,255,.1);color:#e9dcff}

/* Files */
.wsx-files{display:grid;gap:8px}
.wsx-file{display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px;border:1px solid rgba(110,170,255,.18);border-radius:12px;background:var(--wsx-inset);transition:border-color .15s,background .15s}
.wsx-file.is-active{border-color:rgba(111,227,255,.6);background:linear-gradient(160deg,rgba(31,201,241,.1),rgba(5,10,28,.8))}
.wsx-file.is-empty{display:block;padding:0;border-style:dashed}
.wsx-file.is-dragover{border-color:var(--wsx-cyan);background:rgba(31,201,241,.12)}
.wsx-file__thumb{width:58px;height:58px;border-radius:8px;overflow:hidden;background:#02050f}
.wsx-file__thumb>*{width:100%;height:100%;object-fit:cover;display:block}
.wsx-file__info{display:grid;gap:2px;min-width:0;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer}
.wsx-file__info small{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--wsx-cyan)}
.wsx-file__info strong{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px}
.wsx-file__info span{font-size:11px;color:var(--wsx-muted)}
.wsx-file__tools{display:flex;gap:4px}
.wsx-file__warn{grid-column:1/-1;margin:0;color:#ffcf7a;font-size:11px;line-height:1.4}
.wsx-mini{display:grid;place-items:center;width:30px;height:30px;padding:5px;border:1px solid rgba(110,170,255,.22);border-radius:8px;background:rgba(5,10,28,.7);color:var(--wsx-ink);cursor:pointer}
.wsx-mini:hover:not(:disabled){border-color:rgba(111,227,255,.55);background:rgba(31,201,241,.12)}
.wsx-mini:disabled{opacity:.3;cursor:default}
.wsx-mini--danger:hover:not(:disabled){border-color:rgba(255,110,130,.6);background:rgba(255,80,110,.12)}
.wsx-file__drop{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;column-gap:12px;align-items:center;width:100%;padding:14px;border:0;border-radius:12px;
  background:transparent;color:var(--wsx-ink);cursor:pointer;text-align:left}
.wsx-file__drop .wsx-icon{grid-row:1/4;width:38px;height:38px;padding:8px;border-radius:10px;background:rgba(31,201,241,.12);color:var(--wsx-cyan)}
.wsx-file__drop b{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--wsx-cyan)}
.wsx-file__drop span{font-size:13px;font-weight:700}
.wsx-file__drop small{font-size:11px;color:var(--wsx-muted)}
.wsx-file__drop:hover{background:rgba(31,201,241,.06)}
.wsx-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;padding:9px 12px;border:1px solid rgba(110,170,255,.25);border-radius:10px;
  background:rgba(5,10,28,.6);color:var(--wsx-ink);font-size:12px;font-weight:700;cursor:pointer}
.wsx-ghost:hover{border-color:rgba(111,227,255,.55);background:rgba(31,201,241,.1)}
.wsx-files+.wsx-ghost{width:100%}
.wsx-area{margin-top:16px}
.wsx-map{display:block;width:100%;height:auto;aspect-ratio:640/300;border-radius:10px;background:#02050f;cursor:move;touch-action:none}

/* Color + animation */
.wsx-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.wsx-chip{padding:7px 12px;border:1px solid rgba(110,170,255,.22);border-radius:999px;background:var(--wsx-inset);color:var(--wsx-muted);font-size:12px;font-weight:700;cursor:pointer}
.wsx-chip.is-active{border-color:var(--wsx-cyan);color:#fff;background:rgba(31,201,241,.16)}
.wsx-chip:disabled{opacity:.4;cursor:default}
.wsx-sliders{display:grid;gap:12px}
.wsx-slider{display:grid;grid-template-columns:1fr auto;gap:6px 10px;font-size:12px;color:var(--wsx-muted)}
.wsx-slider output{font-variant-numeric:tabular-nums;color:var(--wsx-ink);font-weight:700}
.wsx-slider input{grid-column:1/-1;width:100%;accent-color:var(--wsx-cyan)}
.wsx-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.wsx-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:12px}
.wsx-field{display:grid;gap:6px;font-size:12px;color:var(--wsx-muted);margin-bottom:10px}
.wsx-field select,.wsx-field input{width:100%;min-height:38px;padding:7px 10px;border:1px solid rgba(110,170,255,.25);border-radius:9px;background:rgba(2,6,18,.85);color:var(--wsx-ink);font:inherit;font-size:13px}
.wsx-fx .sqfx__note{display:none}

/* Footer */
.wsx-foot{display:grid;gap:8px;padding:12px 14px 14px;border-top:1px solid var(--wsx-line);background:rgba(3,7,20,.55)}
.wsx-foot p{margin:0}
.wsx-foot__summary{font-size:12px;font-weight:700;color:var(--wsx-ink)}
.wsx-foot__zip,.wsx-foot__plan{font-size:11px;line-height:1.4;color:var(--wsx-muted)}
.wsx-foot__plan{padding:7px 9px;border-left:2px solid var(--wsx-cyan);border-radius:0 6px 6px 0;background:rgba(31,201,241,.07)}
.wsx .wsx-foot__create{width:100%;min-height:46px;margin:0;font-size:14px;font-weight:800}
.wsx .wsx-foot__create:disabled{opacity:.45;cursor:not-allowed}
.wsx-foot__progress{width:100%;height:6px;accent-color:var(--wsx-cyan)}
.wsx-foot__status{font-size:12px;line-height:1.4;color:var(--wsx-muted)}
.wsx-foot__status:empty{display:none}
.wsx-foot__status[data-kind=bad]{color:#ff9aaa}.wsx-foot__status[data-kind=ok]{color:#7dffc4}
.wsx-foot__download{justify-self:start;font-size:12px;font-weight:700;color:var(--wsx-cyan)}

/* ------------------------------------------------------------------ Steam preview */
.wsx-stage{overflow:hidden}
.wsx-stage__head{display:flex;align-items:center;justify-content:space-between;gap:12px 18px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--wsx-line)}
.wsx-stage__titles{display:grid;gap:2px;min-width:0}
.wsx-stage__title{font:800 11px/1.2 Consolas,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--wsx-cyan)}
.wsx-stage__hint{font-size:12px;color:var(--wsx-muted)}
.wsx-zoom{display:flex;align-items:center;gap:10px;min-width:min(100%,280px);font-size:11px;color:var(--wsx-muted)}
.wsx-zoom input{flex:1;accent-color:var(--wsx-cyan)}
.wsx-zoom__reset{display:grid;place-items:center;width:30px;height:30px;padding:6px;border:1px solid rgba(110,170,255,.25);border-radius:8px;background:rgba(5,10,28,.7);color:var(--wsx-ink);cursor:pointer}
.wsx-stage__foot{margin:0;padding:10px 16px 14px;font-size:11px;color:var(--wsx-muted)}
/* Steam profile look: dark column, showcases with a title bar and a thin top line. */
.wsx-profile{display:grid;gap:16px;max-width:720px;margin:18px auto 4px;padding:16px;border-radius:4px;
  background:linear-gradient(180deg,rgba(20,32,48,.95),rgba(14,22,34,.96));box-shadow:0 0 0 1px rgba(0,0,0,.4);font-family:"Motiva Sans",Arial,Helvetica,sans-serif}
.wsx-show{position:relative;background:rgba(0,0,0,.22);border-top:1px solid rgba(255,255,255,.08);border-radius:3px;transition:box-shadow .15s}
.wsx-show.is-active{box-shadow:0 0 0 2px rgba(95,228,255,.75),0 0 26px rgba(31,201,241,.18)}
.wsx-show.is-dragover{box-shadow:0 0 0 2px var(--wsx-cyan),inset 0 0 0 999px rgba(31,201,241,.08)}
.wsx-show__head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px 9px}
.wsx-show__title{font-size:17px;font-weight:400;color:#fff;letter-spacing:.01em}
.wsx-show__tag{padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.07);color:#b5c7da;font:700 10px/1.2 var(--v2-font,system-ui);letter-spacing:.04em;text-transform:uppercase}
.wsx-show.is-active .wsx-show__tag{background:rgba(31,201,241,.22);color:#dff8ff}
.wsx-show__body{padding:0 14px 14px}
.wsx-show__loading{display:grid;place-items:center;min-height:120px;color:#8ba3b9;font-size:12px}
.wsx-show__empty{position:relative;display:grid;justify-items:center;align-content:center;gap:10px;width:100%;min-height:180px;padding:22px;border:1px dashed rgba(143,180,214,.4);border-radius:4px;
  background:rgba(0,0,0,.25);color:#b5c7da;font:600 13px/1.4 var(--v2-font,system-ui);cursor:pointer;text-align:center}
.wsx-show__empty .wsx-icon{width:30px;height:30px;color:var(--wsx-cyan)}
.wsx-show__empty:hover{border-color:var(--wsx-cyan);color:#fff}
.wsx-show__empty.is-squares{min-height:0;aspect-ratio:626/122;padding:0}
.wsx-show__empty.is-squares>.wsx-icon,.wsx-show__empty.is-squares>span:last-child{position:relative;z-index:1}
.wsx-show__empty.is-squares>span:last-child{padding:3px 10px;border-radius:6px;background:rgba(10,16,26,.75)}
.wsx-ghost-squares{position:absolute;inset:0;display:grid;grid-template-columns:repeat(5,1fr);column-gap:.639%}
.wsx-ghost-squares i{border:1px dashed rgba(143,180,214,.28);background:rgba(255,255,255,.02)}
/* full-height rows while empty: five tall columns with Steam's gaps */
.wsx-show__empty.is-rows{min-height:0;aspect-ratio:626/360;padding:0;border-color:transparent}
.wsx-show__empty.is-rows>.wsx-icon,.wsx-show__empty.is-rows>span:last-child{position:relative;z-index:1}
.wsx-show__empty.is-rows>span:last-child{padding:3px 10px;border-radius:6px;background:rgba(10,16,26,.75)}
.wsx-ghost-rows i{background:linear-gradient(180deg,rgba(31,201,241,.06),rgba(138,125,255,.05))}
.wsx-show__empty.is-rows:hover .wsx-ghost-rows i{border-color:rgba(127,233,255,.5)}
.wsx-sq{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:.639%;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.wsx-sq.is-dragging{cursor:grabbing}
.wsx-sq__tile{position:relative;aspect-ratio:1;overflow:hidden;background:#000}
.wsx-sq__media{position:absolute;display:block;max-width:none;max-height:none;pointer-events:none;user-select:none}
canvas.wsx-sq__media{inset:0;width:100%;height:100%}
.wsx-sq__fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.wsx-sq__source{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.wsx-rowmedia{position:relative;line-height:0;background:#000}
/* Full-height rows: five columns with Steam gaps; each column shows a fifth of the file. */
.wsx-sq--rows{cursor:default;touch-action:auto}
.wsx-sq--rows .wsx-sq__tile{aspect-ratio:var(--wsx-col)}
img.wsx-sq__media--col{top:0;width:500%;height:100%}
.wsx.is-busy .wsx-head,.wsx.is-busy .wsx-panel__body,.wsx.is-busy .wsx-profile{pointer-events:none}
.wsx.is-busy .wsx-panel__body,.wsx.is-busy .wsx-profile{opacity:.7}

@media (max-width:1240px){.wsx-head{grid-template-columns:1fr 1fr}.wsx-head__text{grid-column:1/-1}.wsx-type__btn{min-width:0;flex:1}.wsx-type{min-width:0}}
@media (max-width:980px){
  .wsx-body{grid-template-columns:1fr}
  .wsx-stage{order:-1}
  .wsx-panel{position:static;max-height:none}
  .wsx-panel__body{overflow:visible}
  .wsx-foot{position:sticky;bottom:0;z-index:3;background:rgba(5,10,28,.96)}
}
@media (max-width:640px){
  .wsx-head{grid-template-columns:1fr;padding:14px}
  .wsx-type{display:grid;grid-template-columns:1fr 1fr}
  .wsx-type__btn{grid-template-columns:1fr;grid-template-rows:auto;row-gap:6px;padding:10px;min-width:0}
  .wsx-type__art{grid-row:auto}
  .wsx-count{grid-template-columns:auto 1fr;align-items:center}
  .wsx-count__buttons{justify-content:flex-end}
  .wsx-profile{margin:10px;padding:8px}
  .wsx-show__head{padding:8px 10px}.wsx-show__title{font-size:14px}.wsx-show__body{padding:0 8px 10px}
  .wsx-tab{font-size:10px}
}
@media (prefers-reduced-motion:reduce){.wsx *{transition:none!important}}
.sqfx__label{margin:14px 0 8px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#8fb2c2}.sqfx__label:first-child{margin-top:0}
.sqfx__styles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.sqfx__style{display:grid;justify-items:center;gap:5px;padding:9px 4px 8px;border:1px solid #2a4757;background:#0a1721;color:#bcd0da;cursor:pointer;text-align:center}
.sqfx__style b{font-size:11px;line-height:1.2}.sqfx__style small{font-size:9px;color:#d59bff;letter-spacing:.04em}
.sqfx__style[aria-checked=true]{border-color:#5cdeff;background:#123f50;color:#f1fcff}
.sqfx__swatch{display:flex;gap:3px}.sqfx__swatch i{width:16px;height:16px;box-sizing:border-box;background:#132b38}
.sqfx__style[data-style=none] .sqfx__swatch i{border:1px dashed #3d5d6c}
.sqfx__style[data-style=solid] .sqfx__swatch i{border:2px solid #8de9ff}
.sqfx__style[data-style=double] .sqfx__swatch i{border:2px solid #8de9ff;outline:1px solid #8a62ff;outline-offset:-5px}
.sqfx__style[data-style=corners] .sqfx__swatch i{background:linear-gradient(#8de9ff,#8de9ff) 0 0/5px 2px no-repeat,linear-gradient(#8de9ff,#8de9ff) 0 0/2px 5px no-repeat,linear-gradient(#8de9ff,#8de9ff) 100% 100%/5px 2px no-repeat,linear-gradient(#8de9ff,#8de9ff) 100% 100%/2px 5px no-repeat,#132b38}
.sqfx__style[data-style=neon] .sqfx__swatch i{border:2px solid #c9f6ff;box-shadow:0 0 6px #5cdeff,inset 0 0 4px #5cdeff}
.sqfx__style[data-style=rgb] .sqfx__swatch i{border:2px solid transparent;background:linear-gradient(#132b38,#132b38) padding-box,linear-gradient(90deg,#ff3b3b,#ffd93b,#3bff7a,#3bd8ff,#8a3bff,#ff3bd2) border-box;background-size:auto,300% 100%;animation:sqfx-rgb 2.4s linear infinite}
.sqfx__style[data-style=comet] .sqfx__swatch i{border:2px solid #2b5a6c;box-shadow:inset 3px 3px 0 -1px #fff,0 0 5px #5cdeff}
.sqfx__style[data-style=pulse] .sqfx__swatch i{border:2px solid #c9f6ff;animation:sqfx-pulse 1.4s ease-in-out infinite alternate}
.sqfx__style[data-style=dashes] .sqfx__swatch i{border:2px dashed #8de9ff}
.sqfx__style[data-style=shimmer] .sqfx__swatch i{border:2px solid transparent;background:linear-gradient(#132b38,#132b38) padding-box,linear-gradient(90deg,#3f7d93 0 35%,#fff 50%,#3f7d93 65% 100%) border-box;background-size:auto,300% 100%;animation:sqfx-rgb 1.8s linear infinite}
.sqfx__style[data-style=grain] .sqfx__swatch i{border:2px dotted #b9f2ff;box-shadow:0 0 4px #5cdeff;animation:sqfx-grain .5s steps(2) infinite}
@keyframes sqfx-grain{50%{border-color:#4f8ea3}}
.sqfx__shapes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.sqfx__shape{display:grid;justify-items:center;gap:4px;padding:7px 3px 6px;border:1px solid #2a4757;background:#0a1721;color:#bcd0da;cursor:pointer;text-align:center;min-width:0}
.sqfx__shape canvas{width:30px;height:39px;display:block}
.sqfx__shape b{font-size:10px;line-height:1.15;overflow-wrap:break-word;hyphens:auto}
.sqfx__shape[aria-checked=true]{border-color:#5cdeff;background:#123f50;color:#f1fcff}
@media (prefers-reduced-motion:reduce){.sqfx__style .sqfx__swatch i{animation:none!important}}
@keyframes sqfx-rgb{to{background-position:0 0,300% 0}}@keyframes sqfx-pulse{from{box-shadow:0 0 1px #5cdeff}to{box-shadow:0 0 9px #5cdeff,inset 0 0 5px #5cdeff}}
.sqfx__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;margin-top:12px}
.sqfx__range{display:grid;grid-template-columns:1fr auto;gap:3px;font-size:10px;color:#abc3cf}.sqfx__range output{color:#69dcff}.sqfx__range input{grid-column:1/-1;width:100%;accent-color:#5cdeff}
.sqfx__color{display:flex;align-items:center;gap:8px;font-size:11px;color:#abc3cf}.sqfx__color input{flex:none;width:34px!important;min-width:0!important;height:28px!important;padding:0!important;border:1px solid #2c4655;background:#08141d;cursor:pointer}
.sqfx__target{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px;font-size:11px;color:#abc3cf}.sqfx__target span{margin-right:4px}.sqfx__target button{padding:6px 10px;border:1px solid #2a4757;background:#0a1721;color:#bcd0da;cursor:pointer;font-size:11px;font-weight:700}.sqfx__target button[aria-pressed=true]{border-color:#5cdeff;background:#123f50;color:#f1fcff}
.sqfx__select{width:100%;padding:9px;background:#08141d;border:1px solid #2c4655;color:#e9f9ff}
.sqfx__note{margin:12px 0 0;padding:9px 10px;border-left:2px solid #d59bff;background:#1a1530;color:#d9ccef;font-size:11px;line-height:1.45}
@media(prefers-reduced-motion:reduce){.sqfx__swatch i{animation:none!important}}
/* Process tab: styled/animated Workshop outline (process-frame-fx.js) */
.workshop-outline__fx{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:end;gap:10px 14px}.workshop-outline__fx .field{margin:0;min-width:150px}.workshop-outline__fx [hidden]{display:none!important}
.workshop-outline__fx select{min-height:36px}.workshop-outline__speed input{width:100%}
.workshop-outline__fxnote{flex:1 1 100%;margin:0;padding:8px 10px;border-left:2px solid #d59bff;background:rgba(138,98,255,.08);color:#d9ccef;font-size:11px;line-height:1.45}
.page-tools .top-chrome .nav button[data-tab="workshop"]{--tool-icon:url('/static/img/tool-icons/workshop.svg')}
.sqfx__presets{display:flex;flex-wrap:wrap;gap:6px}
.sqfx__preset{padding:7px 11px;border:1px solid #2a4757;background:#0a1721;color:#cfe3ec;font-size:11px;font-weight:700;cursor:pointer}
.sqfx__preset:hover,.sqfx__preset:focus-visible{border-color:#5cdeff;color:#f1fcff}

/* Picture pickers for frames and their animations (2026-09-29), shared by Process,
   Workshop Studio and the Builder. Tiles draw the real frame / play the real animation. */
.sqfx-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:8px}
.sqfx-pick--styles{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
.sqfx-pick__tile{display:grid;justify-items:center;align-content:start;gap:5px;min-width:0;padding:6px 4px 7px;border:1px solid rgba(110,170,255,.2);border-radius:10px;background:rgba(5,10,28,.72);color:#c9d8e6;cursor:pointer;text-align:center;transition:border-color .15s,background .15s,transform .15s}
.sqfx-pick__tile:hover{border-color:rgba(95,228,255,.55);transform:translateY(-1px)}
.sqfx-pick__tile:focus-visible{outline:2px solid #5fe4ff;outline-offset:2px}
.sqfx-pick__tile[aria-checked=true]{border-color:#5fe4ff;background:rgba(31,201,241,.14);box-shadow:0 0 0 1px rgba(95,228,255,.35),0 0 14px rgba(95,228,255,.18);color:#f1fcff}
.sqfx-pick__tile canvas{display:block;border-radius:6px;max-width:100%;height:auto}
.sqfx-pick__tile span{font-size:11px;font-weight:700;line-height:1.15;overflow-wrap:break-word;hyphens:auto}
.sqfx-pick__tile small{font-size:9px;color:#d59bff;letter-spacing:.03em;line-height:1}
.sqfx-swatches{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.sqfx-swatches__dot{width:24px;height:24px;border-radius:7px;border:2px solid rgba(255,255,255,.12);cursor:pointer;padding:0}
.sqfx-swatches__dot[aria-pressed=true]{border-color:#fff;box-shadow:0 0 0 2px rgba(95,228,255,.6)}
.sqfx-swatches__custom{position:relative;width:24px;height:24px;border-radius:7px;overflow:hidden;background:conic-gradient(#ff2d2d,#ffe600,#1fff8f,#1a9bff,#c13bff,#ff2d2d);border:2px solid rgba(255,255,255,.2)}
.sqfx-swatches__custom input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
.process-frame__block{display:grid;gap:6px;grid-column:1/-1}
.process-frame__block .sqfx__label{margin:0}
.builder-frame-picker{display:grid;gap:8px;margin-bottom:10px}
.builder-frame-picker__label{margin:4px 0 0;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#9fb6c9}
@media (max-width:520px){.sqfx-pick{grid-template-columns:repeat(4,minmax(0,1fr))}.sqfx-pick--styles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.sqfx-pick__tile{transition:none}}