/* KMJL Creative Studio design tokens: semantic, one place. Values follow Apple's developer documentation (measured, see docs/studio-ui.md).
   Dark is the default; light follows data-sk="light", or the system when data-sk="system" (the app sets it, see studio-ui.js). */
:root{
  --sk-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,"Helvetica Neue",Arial,sans-serif;
  --sk-font-d:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",system-ui,"Helvetica Neue",Arial,sans-serif;
  --sk-canvas:#0c0c0d;--sk-bg:#161617;--sk-surface:#1d1d1f;--sk-raised:#232326;--sk-input:#121213;
  --sk-line:#2c2c2e;--sk-line-2:#38383b;--sk-line-3:#4a4a4e;
  --sk-fill:#2a2a2d;--sk-fill-2:#333336;--sk-fill-3:#424245;--sk-dot:#1b1b1d;
  --sk-text:#f5f5f7;--sk-text-2:#c7c7cc;--sk-text-3:#a1a1a6;--sk-text-4:#86868b;
  --sk-accent:#e4ae52;--sk-accent-2:#f2c46b;--sk-accent-3:#c98a2b;--sk-accent-text:#f2c46b;--sk-accent-soft:rgba(228,174,82,.16);--sk-on-accent:#241706;
  --sk-focus:rgba(0,125,250,.65);--sk-link:#2997ff;
  --sk-ov:255 255 255;--sk-sh:0 0 0;--sk-sha-hi:.55;--sk-sha-md:.35;
  --sk-glass:rgba(29,29,31,.82);--sk-glass-line:rgba(255,255,255,.1);
  --sk-s1:4px;--sk-s2:8px;--sk-s3:12px;--sk-s4:16px;--sk-s5:20px;--sk-s6:24px;--sk-s8:32px;--sk-s10:40px;--sk-s12:48px;
  --sk-r-ctl:8px;--sk-r-card:12px;--sk-r-pop:14px;--sk-r-pill:999px;
  --sk-ease:cubic-bezier(.4,0,.6,1);--sk-ease-out:cubic-bezier(.2,.8,.2,1);
  --sk-t-hover:.13s;--sk-t-press:.1s;--sk-t-pop:.18s;--sk-t-tip:.15s;--sk-t-side:.22s;--sk-t-modal:.26s;
  color-scheme:dark;
}
:root[data-sk="light"]{
  --sk-canvas:#e9e9ed;--sk-bg:#f5f5f7;--sk-surface:#ffffff;--sk-raised:#ffffff;--sk-input:#f5f5f7;
  --sk-line:#e5e5ea;--sk-line-2:#d2d2d7;--sk-line-3:#bcbcc2;
  --sk-fill:#f0f0f3;--sk-fill-2:#e8e8ed;--sk-fill-3:#dcdce1;--sk-dot:#dedee3;
  --sk-text:#1d1d1f;--sk-text-2:#424245;--sk-text-3:#6e6e73;--sk-text-4:#86868b;
  --sk-accent-text:#8a5a0e;--sk-accent-soft:rgba(228,174,82,.2);
  --sk-focus:rgba(0,125,250,.6);--sk-link:#0066cc;
  --sk-ov:0 0 0;--sk-sh:40 30 10;--sk-sha-hi:.2;--sk-sha-md:.12;
  --sk-glass:rgba(255,255,255,.78);--sk-glass-line:rgba(0,0,0,.08);
  color-scheme:light;
}
@media (prefers-color-scheme:light){:root[data-sk="system"]{
  --sk-canvas:#e9e9ed;--sk-bg:#f5f5f7;--sk-surface:#ffffff;--sk-raised:#ffffff;--sk-input:#f5f5f7;
  --sk-line:#e5e5ea;--sk-line-2:#d2d2d7;--sk-line-3:#bcbcc2;
  --sk-fill:#f0f0f3;--sk-fill-2:#e8e8ed;--sk-fill-3:#dcdce1;--sk-dot:#dedee3;
  --sk-text:#1d1d1f;--sk-text-2:#424245;--sk-text-3:#6e6e73;--sk-text-4:#86868b;
  --sk-accent-text:#8a5a0e;--sk-accent-soft:rgba(228,174,82,.2);
  --sk-focus:rgba(0,125,250,.6);--sk-link:#0066cc;
  --sk-ov:0 0 0;--sk-sh:40 30 10;--sk-sha-hi:.2;--sk-sha-md:.12;
  --sk-glass:rgba(255,255,255,.78);--sk-glass-line:rgba(0,0,0,.08);
  color-scheme:light;}}
@media (prefers-reduced-transparency:reduce){:root{--sk-glass:var(--sk-surface);--sk-glass-line:var(--sk-line-2)}}

/* KMJL Creator Studio */
.sd{display:grid;gap:16px;min-width:0;padding:4px 2px 24px}
.sd__i{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-3px}
.sd__hint{margin:8px 0 0;font-size:12px;line-height:1.5;color:var(--ink-3)}
.sd__sp{flex:1}

/* home */
.sd__hero{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:22px 24px;border-radius:20px;background:linear-gradient(135deg,#F3CB7B,#E4AE52)}
.sd__hero h2{margin:0;font-size:24px;letter-spacing:-.02em;color:#3A2608}.sd__hero p{margin:6px 0 0;max-width:56ch;font-size:13.5px;line-height:1.5;color:rgba(58,38,8,.78)}
.sd__new{position:relative}
.sd__menu{position:absolute;right:0;top:calc(100% + 8px);z-index:30;min-width:240px;max-height:70vh;overflow:auto;padding:8px;border:1px solid var(--edge);border-radius:14px;background:#fff;box-shadow:0 14px 40px rgba(60,42,12,.2);display:grid;gap:2px}
.sd__menu[hidden]{display:none}
.sd__menu h5{margin:8px 8px 2px;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.sd__menu button{font:inherit;font-size:13px;text-align:left;padding:8px 10px;border:0;border-radius:9px;background:transparent;color:var(--ink);cursor:pointer;display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.sd__menu button:hover{background:#F6EFE0}.sd__menu small{font-size:11.5px;color:var(--ink-3)}
.sd__menu--w{min-width:300px}
.sd__custom{display:flex;gap:6px;align-items:center;padding:6px 8px 4px}.sd__custom input{width:84px;font:inherit;font-size:13px;padding:7px 8px;border:1px solid var(--edge);border-radius:8px}
.sd__hd{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}.sd__hd h3{margin:0;font-size:16px;font-weight:600;color:var(--ink)}
.sd__chips{display:flex;gap:6px;flex-wrap:wrap}
.sd__chips button{font:inherit;font-size:12.5px;font-weight:500;padding:6px 13px;border:1px solid var(--edge);border-radius:18px;background:#fff;color:#6B5B41;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.sd__chips button:hover{border-color:#D9C9A8}.sd__chips button.is-on{background:#3A2A0C;border-color:#3A2A0C;color:#fff}
.sd__hgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.sd__card{font:inherit;text-align:left;border:1px solid var(--edge);border-radius:16px;background:#fff;padding:10px;display:grid;gap:3px;align-content:start;cursor:pointer;position:relative;transition:box-shadow .2s,transform .2s,border-color .2s;min-width:0}
.sd__card:hover{box-shadow:0 10px 26px rgba(80,56,20,.12);transform:translateY(-2px);border-color:#D9C9A8}
.sd__cth{display:grid;place-items:center;height:210px;border-radius:10px;background:#F1EBE1;margin-bottom:6px;overflow:hidden}.sd__cth canvas,.sd__cth img{max-width:100%;max-height:198px;width:auto;height:auto;display:block;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.sd__card b{font-size:13px;font-weight:600;color:var(--ink);padding:0 4px}.sd__card small{font-size:11.5px;color:var(--ink-3);padding:0 4px}
.sd__cact{position:absolute;top:16px;right:16px;display:flex;gap:6px;opacity:0;transition:opacity .15s}.sd__card:hover .sd__cact,.sd__card:focus-within .sd__cact{opacity:1}
.sd__cact button{width:30px;height:30px;border-radius:50%;border:0;background:rgba(255,255,255,.95);color:#6B5B41;display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.2)}.sd__cact button:hover{background:#3A2A0C;color:#fff}


/* unsaved work found */
.sd__draft{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 16px;margin-bottom:14px;border:1px solid #E6D2A4;border-radius:14px;background:#FBF0D9}.sd__draft span{flex:1;min-width:200px;font-size:13px;color:var(--ink-2)}.sd__draft b{display:block;font-size:13.5px;color:var(--ink)}
.sdx__i{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-3px}
.sd .sdx__i{width:17px;height:17px}

/* the full-screen editor */
body.sdx-open{overflow:hidden}
.sdx{position:fixed;inset:0;z-index:900;display:grid;grid-template-rows:auto minmax(0,1fr);background:var(--sk-bg);color:var(--sk-text);font-family:inherit;font-size:13px;animation:sdxIn .38s cubic-bezier(.2,.8,.2,1) both}
.sdx.is-out{animation:sdxOut .24s cubic-bezier(.4,0,1,1) both;pointer-events:none}
@keyframes sdxIn{from{opacity:0;transform:scale(.97) translateY(10px)}to{opacity:1;transform:none}}
@keyframes sdxOut{from{opacity:1;transform:none}to{opacity:0;transform:scale(.98)}}
:where(.sdx) button{font:inherit;color:inherit}:where(.sdx) input,:where(.sdx) select{font:inherit}
.sdx__sp{flex:1}
.sdx__top{display:flex;align-items:center;gap:6px;padding:0 12px;height:52px;background:linear-gradient(180deg,var(--sk-surface),var(--sk-bg));box-shadow:0 2px 14px rgb(var(--sk-sh) / var(--sk-sha-md));position:relative;z-index:6}
.sdx__tbtn{display:inline-flex;align-items:center;gap:6px;height:36px;min-width:36px;padding:0 10px;justify-content:center;border:0;border-radius:9px;background:transparent;color:var(--sk-text);cursor:pointer;transition:background .15s}
.sdx__tbtn:hover{background:rgb(var(--sk-ov) / .18)}.sdx__tbtn--t{font-weight:600}.sdx__back{background:rgb(var(--sk-ov) / .16);padding:0 14px 0 8px;font-weight:600;margin-right:4px}.sdx__back:hover{background:rgb(var(--sk-ov) / .28)}
.sdx__save{font-size:12px;color:rgb(var(--sk-ov) / .78);margin-left:6px;min-width:110px}
.sdx__name{height:34px;width:230px;max-width:30vw;padding:0 10px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--sk-text);font-weight:600;font-size:14px;text-align:center}.sdx__name:hover{background:rgb(var(--sk-ov) / .14)}.sdx__name:focus{outline:0;background:rgba(0,0,0,.28);border-color:rgb(var(--sk-ov) / .4)}
.sdx__dim{font-size:12px;color:rgb(var(--sk-ov) / .7);white-space:nowrap}
.sdx__dlb{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 16px;border:0;border-radius:9px;background:#fff;color:var(--sk-on-accent);font-weight:700;cursor:pointer;transition:transform .15s,box-shadow .15s}.sdx__dlb:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgb(var(--sk-sh) / var(--sk-sha-md))}
.sdx__dlm{position:absolute;right:12px;top:48px;min-width:230px;padding:6px;border-radius:12px;background:var(--sk-raised);border:1px solid var(--sk-line-3);box-shadow:0 16px 40px rgb(var(--sk-sh) / var(--sk-sha-hi));display:grid;gap:2px;animation:sdxPop .16s ease-out both}.sdx__dlm[hidden]{display:none}
.sdx__dlm button{display:flex;justify-content:space-between;gap:12px;align-items:baseline;text-align:left;padding:9px 11px;border:0;border-radius:8px;background:transparent;cursor:pointer}.sdx__dlm button:hover{background:var(--sk-fill-2)}.sdx__dlm small{font-size:11.5px;color:var(--sk-text-3)}
@keyframes sdxPop{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}

.sdx__main{display:grid;grid-template-columns:76px auto minmax(0,1fr) auto;min-height:0;position:relative}
.sdx__rail{display:flex;flex-direction:column;gap:2px;padding:8px 6px;background:var(--sk-canvas);border-right:1px solid var(--sk-line)}
.sdx__rail button{display:grid;place-items:center;gap:4px;padding:10px 2px;border:0;border-radius:10px;background:transparent;color:var(--sk-text-3);cursor:pointer;font-size:11px;font-weight:600;transition:background .15s,color .15s}
.sdx__rail button:hover{background:var(--sk-raised);color:var(--sk-text)}.sdx__rail button.is-on{background:var(--sk-fill);color:var(--sk-accent-text)}.sdx__rail .sdx__i{width:22px;height:22px}
.sdx__panel{position:relative;width:330px;background:var(--sk-surface);border-right:1px solid var(--sk-line);overflow:hidden;transition:width .3s cubic-bezier(.2,.8,.2,1),opacity .2s}
.sdx__panel.is-shut{width:0;opacity:0;border-right:0}
.sdx__pb{width:330px;height:100%;overflow:auto;padding:16px;scrollbar-width:thin;scrollbar-color:var(--sk-line-3) transparent}
.sdx__shut{position:absolute;right:0;top:50%;transform:translateY(-50%);width:16px;height:64px;border:0;border-radius:8px 0 0 8px;background:#2d2d37;color:#a8a8ba;cursor:pointer;display:grid;place-items:center;padding:0}.sdx__shut:hover{background:#45454f;color:var(--sk-text)}.sdx__shut .sdx__i{width:14px;height:14px}
.sdx__open{position:absolute;left:76px;top:50%;transform:translateY(-50%);z-index:3;width:16px;height:64px;border:0;border-radius:0 8px 8px 0;background:var(--sk-fill);color:var(--sk-text-3);cursor:pointer;display:none;place-items:center;padding:0}.sdx__open:not(.is-shut){display:grid}.sdx__open:hover{background:var(--sk-line-3);color:var(--sk-text)}.sdx__open .sdx__i{width:14px;height:14px}.sdx__rr{transform:rotate(-90deg)}
.sdx__pb h4{margin:18px 0 9px;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--sk-text-3)}.sdx__pb h4:first-child{margin-top:0}
.sdx__hint{margin:10px 0 0;font-size:12px;line-height:1.55;color:var(--sk-text-3)}.sdx__hint b{color:var(--sk-accent-text)}
.sdx__search{display:flex;align-items:center;gap:8px;padding:0 12px;height:38px;border-radius:10px;background:var(--sk-fill);border:1px solid var(--sk-fill-2);color:var(--sk-text-3)}.sdx__search:focus-within{border-color:var(--sk-accent-3)}.sdx__search input{flex:1;min-width:0;background:transparent;border:0;color:var(--sk-text);outline:0}
.sdx__chips{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}.sdx__chips button{padding:5px 12px;border:1px solid var(--sk-fill-2);border-radius:16px;background:transparent;color:var(--sk-text-2);cursor:pointer;font-size:12px;font-weight:500;transition:all .15s}.sdx__chips button:hover{border-color:var(--sk-line-3);color:var(--sk-text)}.sdx__chips button.is-on{background:var(--sk-accent);border-color:var(--sk-accent);color:var(--sk-text);font-weight:700}
.sdx__btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 16px;border:0;border-radius:10px;background:var(--sk-accent);color:var(--sk-text);font-weight:700;cursor:pointer;transition:filter .15s}.sdx__btn:hover{filter:brightness(1.07)}.sdx__wide{width:100%;justify-content:center}
.sdx__tgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sdx__tpl{text-align:left;padding:6px;border:1px solid var(--sk-fill-2);border-radius:12px;background:var(--sk-raised);cursor:pointer;display:grid;gap:5px;transition:transform .2s,border-color .15s,box-shadow .2s}.sdx__tpl:hover{border-color:var(--sk-accent);transform:translateY(-2px);box-shadow:0 8px 20px rgb(var(--sk-sh) / var(--sk-sha-md))}
.sdx__tth{display:grid;place-items:center;height:132px;background:var(--sk-input);border-radius:8px;overflow:hidden}.sdx__tth canvas{max-width:100%;max-height:126px;width:auto;height:auto}.sdx__tpl small{font-size:11px;color:var(--sk-text-2);padding:0 2px;line-height:1.3}
.sdx__els{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.sdx__els button{display:grid;place-items:center;gap:7px;padding:14px 6px;border:1px solid var(--sk-fill-2);border-radius:12px;background:var(--sk-raised);cursor:pointer;transition:border-color .15s,transform .15s}.sdx__els button:hover{border-color:var(--sk-accent);transform:translateY(-1px)}.sdx__els small{font-size:11px;color:var(--sk-text-2)}
.sdx__sh{display:block;width:44px;height:30px;background:var(--sk-accent);border-radius:3px}.sdx__sh--round{border-radius:10px;background:#B07040}.sdx__sh--circle{width:34px;height:34px;border-radius:50%}.sdx__sh--ring{width:34px;height:34px;border-radius:50%;background:transparent;border:3px solid var(--sk-accent)}
.sdx__sh--line{height:4px;background:#f3f3f8}.sdx__sh--dash{height:0;background:transparent;border-top:4px dashed #f3f3f8}.sdx__sh--frame{background:#363642;border:2px dashed #70708a}.sdx__sh--cframe{width:34px;height:34px;border-radius:50%;background:#363642;border:2px dashed #70708a}
.sdx__sh--fade{background:linear-gradient(180deg,rgba(255,255,255,0),var(--sk-accent))}.sdx__sh--badge{height:20px;border-radius:10px}
.sdx__tx{display:grid;gap:8px}.sdx__tx button{font-size:22px;text-align:left;padding:12px 14px;border:1px solid var(--sk-fill-2);border-radius:12px;background:var(--sk-raised);color:var(--sk-text);cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:border-color .15s}.sdx__tx button:hover{border-color:var(--sk-accent)}
.sdx__ups{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:12px}.sdx__ups button{padding:0;border:1px solid var(--sk-fill-2);border-radius:10px;overflow:hidden;background:var(--sk-raised);cursor:pointer;aspect-ratio:1;transition:border-color .15s}.sdx__ups button:hover{border-color:var(--sk-accent)}.sdx__ups img{width:100%;height:100%;object-fit:cover;display:block}
.sdx__logos{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.sdx__logos button{display:grid;place-items:center;height:78px;padding:8px;overflow:hidden;border:1px solid var(--sk-fill-2);border-radius:10px;cursor:pointer;transition:border-color .15s}.sdx__logos button:hover{border-color:var(--sk-accent)}.sdx__logos img{max-width:100%;max-height:60px;object-fit:contain}

.sdx__work{display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-width:0;min-height:0}
.sdx__tool{display:flex;align-items:center;gap:2px;height:50px;padding:0 12px;background:var(--sk-surface);border-bottom:1px solid var(--sk-line);overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.sdx__tool::-webkit-scrollbar{display:none}
.sdx__sep{width:1px;height:22px;background:var(--sk-fill-2);margin:0 6px;flex:none}
.sdx__tb,.sdx__tp{display:inline-flex;align-items:center;gap:6px;height:34px;min-width:34px;padding:0 9px;justify-content:center;border:0;border-radius:8px;background:transparent;color:var(--sk-text);cursor:pointer;font-weight:500;flex:none;transition:background .15s,color .15s}
.sdx__tb:hover,.sdx__tp:hover{background:var(--sk-fill-2)}.sdx__tb.is-on,.sdx__tp.is-on{background:var(--sk-line-3);color:var(--sk-accent-text)}
.sdx__tp--hi{background:linear-gradient(90deg,var(--sk-accent),var(--sk-accent-2));color:var(--sk-text);font-weight:700}.sdx__tp--hi:hover{background:linear-gradient(90deg,var(--sk-accent-2),var(--sk-accent-2));color:var(--sk-text)}
.sdx__tp--font{min-width:150px;justify-content:space-between;border:1px solid var(--sk-fill-2);font-size:13px}
.sdx__tp--c{padding:0 7px}.sdx__tp--c i{display:block;width:22px;height:22px;border-radius:6px;box-shadow:inset 0 0 0 1px rgb(var(--sk-ov) / .35);background-clip:padding-box}
.sdx__step{display:inline-flex;align-items:center;border:1px solid var(--sk-fill-2);border-radius:8px;flex:none;height:34px}.sdx__step button{width:30px;height:100%;border:0;background:transparent;color:var(--sk-text);cursor:pointer;display:grid;place-items:center}.sdx__step button:hover{background:var(--sk-fill-2)}.sdx__step input{width:46px;height:100%;border:0;background:transparent;color:var(--sk-text);text-align:center;outline:0;-moz-appearance:textfield}.sdx__step input::-webkit-outer-spin-button,.sdx__step input::-webkit-inner-spin-button{-webkit-appearance:none}
.sdx__tip{font-size:12.5px;color:var(--sk-text-3);padding:0 6px}.sdx__tip--n{color:var(--sk-accent-text);font-weight:600}

.sdx__stagewrap{overflow:auto;display:grid;padding:36px;min-width:0;min-height:0;background:var(--sk-canvas) radial-gradient(circle,var(--sk-dot) 1px,transparent 1px) 0 0/22px 22px;scrollbar-width:thin;scrollbar-color:var(--sk-line-3) transparent}
.sdx__stage{position:relative;margin:auto;flex:none;background:#fff;box-shadow:0 10px 50px rgba(0,0,0,.6);touch-action:none;user-select:none;-webkit-user-select:none}
.sdx__stage canvas{display:block}
.sdx__stage.is-dragging,.sdx__stage.is-dragging *{cursor:grabbing!important}
.sdx__sel{position:absolute;border:2px solid var(--sk-accent);pointer-events:none;box-sizing:border-box;will-change:left,top,width,height,transform}.sdx__sel[hidden]{display:none}
.sdx__sel.is-locked{border-style:dashed}.sdx__sel.is-locked b,.sdx__sel.is-locked .sdx__rot{display:none}
.sdx__sel b{position:absolute;width:12px;height:12px;background:#fff;border:2px solid var(--sk-accent);border-radius:50%;pointer-events:auto;box-sizing:border-box}
.sdx__sel .h-1-1{left:-7px;top:-7px;cursor:nwse-resize}.sdx__sel .h0-1{left:calc(50% - 6px);top:-7px;cursor:ns-resize}.sdx__sel .h1-1{right:-7px;top:-7px;cursor:nesw-resize}
.sdx__sel .h-10{left:-7px;top:calc(50% - 6px);cursor:ew-resize}.sdx__sel .h10{right:-7px;top:calc(50% - 6px);cursor:ew-resize}
.sdx__sel .h-11{left:-7px;bottom:-7px;cursor:nesw-resize}.sdx__sel .h01{left:calc(50% - 6px);bottom:-7px;cursor:ns-resize}.sdx__sel .h11{right:-7px;bottom:-7px;cursor:nwse-resize}
.sdx__sel.is-text .h0-1,.sdx__sel.is-text .h01,.sdx__sel.is-line .h0-1,.sdx__sel.is-line .h01,.sdx__sel.is-line .h-1-1,.sdx__sel.is-line .h1-1,.sdx__sel.is-line .h-11,.sdx__sel.is-line .h11{display:none}
.sdx__rot{position:absolute;left:calc(50% - 9px);bottom:-36px;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--sk-accent);pointer-events:auto;cursor:grab;box-sizing:border-box}
.sdx__guide{position:absolute;pointer-events:none;background:#FF4D8D;z-index:3}.sdx__guide.v{top:0;bottom:0;width:1px}.sdx__guide.h{left:0;right:0;height:1px}
.sdx__grp{position:absolute;border:2px dashed var(--sk-accent);pointer-events:none;box-sizing:border-box}.sdx__grp[hidden]{display:none}.sdx__grp i{position:absolute;border:1px solid rgba(228,174,82,.75);box-sizing:border-box}
.sdx__ang{position:absolute;z-index:7;padding:3px 8px;border-radius:8px;background:var(--sk-raised);border:1px solid var(--sk-line-3);color:var(--sk-accent-text);font-size:12px;font-weight:700;pointer-events:none}.sdx__ang[hidden]{display:none}
.sdx__mq{position:absolute;border:1px solid var(--sk-accent);background:var(--sk-accent-soft);pointer-events:none;z-index:5}.sdx__mq[hidden]{display:none}
.sdx__ta{position:absolute;margin:0;padding:0;border:1px dashed var(--sk-accent);background:rgb(var(--sk-ov) / .05);resize:none;overflow:hidden;outline:0;box-sizing:border-box;z-index:4;white-space:pre-wrap;text-shadow:none}
.sdx__mini{position:absolute;z-index:6;transform:translateX(-50%);display:flex;gap:2px;padding:4px;border-radius:11px;background:var(--sk-raised);border:1px solid var(--sk-line-3);box-shadow:0 8px 24px rgb(var(--sk-sh) / var(--sk-sha-md));animation:sdxPop .16s ease-out both}.sdx__mini[hidden]{display:none}
.sdx__mini .sdx__tb{height:30px;min-width:30px}
.sdx__bot{display:flex;align-items:center;gap:8px;height:42px;padding:0 16px;background:var(--sk-surface);border-top:1px solid var(--sk-line)}
.sdx__bot button{display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:8px;background:transparent;color:var(--sk-text);cursor:pointer}.sdx__bot button:hover{background:var(--sk-fill-2)}
.sdx__bot input[type=range]{width:160px;accent-color:var(--sk-accent)}.sdx__bot .sdx__zv{width:auto;min-width:52px;font-weight:600;padding:0 6px}

/* things that are redrawn on every change must not fade in again, or the whole bar flickers */
.sdx__tool *,.sdx__pop *,.sdx__lyb *,.sdx__mini *,.sdx__ctx *{transition:none!important}
.sdx__mini,.sdx__ctx,.sdx__pop *{animation:none!important}
/* panels that open from the toolbar */
.sdx__pop{position:fixed;z-index:30;padding:14px;border-radius:14px;background:var(--sk-raised);border:1px solid var(--sk-line-3);box-shadow:0 18px 50px rgb(var(--sk-sh) / var(--sk-sha-hi));overflow:auto;animation:sdxPop .18s ease-out both;scrollbar-width:thin;scrollbar-color:var(--sk-line-3) transparent}.sdx__pop[hidden]{display:none}
.sdx__sec{margin:14px 0 8px;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--sk-text-3)}.sdx__sec:first-child{margin-top:0}
.sdx__row{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:8px 0}
.sdx__grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}
.sdx__n{display:grid;gap:4px;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--sk-text-3)}
.sdx__n input,.sdx__f select{height:34px;font-size:13px;text-transform:none;letter-spacing:0;font-weight:400;padding:0 9px;border:1px solid var(--sk-line-3);border-radius:8px;background:var(--sk-input);color:var(--sk-text);width:100%;min-width:0}.sdx__n input:focus,.sdx__f select:focus{outline:0;border-color:var(--sk-accent)}
.sdx__f{display:grid;gap:6px;margin:12px 0;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--sk-text-3)}.sdx__f:first-child{margin-top:0}
.sdx__f input[type=range]{width:100%;accent-color:var(--sk-accent)}
.sdx__check{display:flex;align-items:center;gap:9px;text-transform:none;letter-spacing:0;font-size:13px;font-weight:500;color:var(--sk-text)}.sdx__check input{accent-color:var(--sk-accent)}
.sdx__sw{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.sdx__sw button{width:26px;height:26px;border-radius:50%;border:0;box-shadow:inset 0 0 0 1px rgb(var(--sk-ov) / .28);cursor:pointer;flex:none;transition:transform .12s}.sdx__sw button:hover{transform:scale(1.12)}.sdx__sw button.is-on{box-shadow:0 0 0 2px var(--sk-raised),0 0 0 4px var(--sk-accent)}
.sdx__sw--big button{width:36px;height:36px}
.sdx__sw .sdx__none{width:auto;height:26px;border-radius:13px;padding:0 10px;font-size:11px;font-weight:700;background:var(--sk-input);color:var(--sk-text);box-shadow:inset 0 0 0 1px var(--sk-line-3)}.sdx__sw .sdx__none.is-on{box-shadow:inset 0 0 0 1.5px var(--sk-accent)}
.sdx__cust{width:26px;height:26px;border-radius:50%;overflow:hidden;position:relative;background:conic-gradient(#e44,#ea4,#4c4,#4ae,#a4e,#e44);box-shadow:inset 0 0 0 1px rgb(var(--sk-ov) / .3);cursor:pointer;flex:none}.sdx__cust input{position:absolute;inset:-6px;width:38px;height:38px;opacity:0;cursor:pointer}
.sdx__pill{padding:6px 13px;border:1px solid var(--sk-line-3);border-radius:16px;background:transparent;color:var(--sk-text);cursor:pointer;font-weight:600;font-size:12px}.sdx__pill.is-on{background:var(--sk-accent);border-color:var(--sk-accent);color:var(--sk-text)}
.sdx__chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;border:1px solid var(--sk-line-3);border-radius:8px;background:var(--sk-input);color:var(--sk-text);cursor:pointer;font-size:12px;font-weight:600;transition:border-color .15s,background .15s}.sdx__chip:hover{border-color:var(--sk-accent);background:var(--sk-fill)}
.sdx__fl{display:grid;gap:1px}.sdx__fl h6{margin:12px 0 4px;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--sk-text-3)}.sdx__fl h6:first-child{margin-top:0}
.sdx__fl button{text-align:left;padding:7px 10px;border:0;border-radius:7px;background:transparent;color:var(--sk-text);font-size:16px;cursor:pointer}.sdx__fl button:hover{background:var(--sk-fill-2)}.sdx__fl button.is-on{background:var(--sk-line-3);color:var(--sk-accent-text)}
.sdx__sizes{display:grid;gap:3px}.sdx__sizes button{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 10px;border:0;border-radius:8px;background:transparent;cursor:pointer;text-align:left}.sdx__sizes button:hover{background:var(--sk-fill-2)}.sdx__sizes b{font-weight:600;font-size:13px}.sdx__sizes small{color:var(--sk-text-3);font-size:11.5px}
.sdx__menu{display:grid;gap:2px;min-width:250px;margin:-6px}.sdx__menu button{display:flex;align-items:center;gap:10px;padding:9px 11px;border:0;border-radius:8px;background:transparent;cursor:pointer;text-align:left}.sdx__menu button:hover{background:var(--sk-fill-2)}.sdx__menu span{flex:1}.sdx__menu em{font-style:normal;font-size:11.5px;color:var(--sk-text-3)}

/* the Layers panel */
.sdx__ly{width:0;overflow:hidden;background:var(--sk-surface);border-left:0;display:flex;flex-direction:column;transition:width .3s cubic-bezier(.2,.8,.2,1);min-height:0}
.sdx__ly.is-open{width:290px;border-left:1px solid var(--sk-line)}
.sdx__lyh{display:flex;align-items:center;justify-content:space-between;height:50px;padding:0 14px 0 16px;width:290px;flex:none;border-bottom:1px solid var(--sk-line);font-size:14px}.sdx__lyh button{width:30px;height:30px;border:0;border-radius:8px;background:transparent;color:var(--sk-text-3);cursor:pointer;display:grid;place-items:center}.sdx__lyh button:hover{background:var(--sk-fill-2);color:var(--sk-text)}
.sdx__lyb{flex:1;min-height:0;width:290px;overflow:auto;padding:10px;display:grid;align-content:start;gap:3px;scrollbar-width:thin;scrollbar-color:var(--sk-line-3) transparent}
.sdx__lyt{width:290px;margin:0;padding:10px 16px;border-top:1px solid var(--sk-line)}
.sdx__lyi{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 2px;border:1px solid transparent;border-radius:9px;background:transparent;cursor:pointer;position:relative;transition:background .15s,opacity .15s}
.sdx__lyi:hover{background:var(--sk-fill)}.sdx__lyi.is-on{background:var(--sk-fill-2);border-color:var(--sk-line-3)}.sdx__lyi.is-off{opacity:.45}.sdx__lyi.is-drag{opacity:.35}
.sdx__lyi.is-above::before,.sdx__lyi.is-below::after{content:"";position:absolute;left:6px;right:6px;height:3px;border-radius:2px;background:var(--sk-accent)}
.sdx__lyi.is-above::before{top:-3px}.sdx__lyi.is-below::after{bottom:-3px}
.sdx__grab{flex:none;width:16px;display:grid;place-items:center;color:var(--sk-text-4);cursor:grab}.sdx__grab .sdx__i{width:14px;height:14px;fill:currentColor;stroke:none}.sdx__lyi:active .sdx__grab{cursor:grabbing}
.sdx__lyi>i{flex:none;width:36px;height:36px;border-radius:7px;background:#fff;display:grid;place-items:center;font-style:normal;font-size:15px;font-weight:700;color:#222;overflow:hidden;position:relative}
.sdx__lyi>i img{width:100%;height:100%;object-fit:contain;display:block;background:repeating-conic-gradient(#e6e6e6 0 25%,#fff 0 50%) 0 0/10px 10px}
.sdx__lyi>i u{display:block;width:20px;height:20px;background:#C98A2B;border-radius:3px}.sdx__lyi>i u.c{border-radius:50%}.sdx__lyi>i u.l{height:3px;width:24px;border-radius:2px;background:#2A1808}
.sdx__lyn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sdx__lyi>button{flex:none;width:28px;height:28px;border:0;border-radius:7px;background:transparent;color:var(--sk-text-4);cursor:pointer;display:grid;place-items:center;opacity:.0;transition:opacity .15s,background .15s}
.sdx__lyi:hover>button,.sdx__lyi>button.is-on{opacity:1}.sdx__lyi>button:hover{background:var(--sk-line-3);color:var(--sk-text)}.sdx__lyi>button.is-on{color:var(--sk-accent-text)}
/* right-click menu */
.sdx__ctx{position:fixed;z-index:40;width:250px;padding:6px;border-radius:12px;background:var(--sk-raised);border:1px solid var(--sk-line-3);box-shadow:0 18px 50px rgb(var(--sk-sh) / var(--sk-sha-hi));animation:sdxPop .14s ease-out both}
.sdx__ctx>button,.sdx__subb,.sdx__subm button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:8px;background:transparent;cursor:pointer;text-align:left;color:var(--sk-text)}
.sdx__ctx>button:hover:not(:disabled),.sdx__subb:hover,.sdx__sub:hover>.sdx__subb,.sdx__subm button:hover{background:var(--sk-fill-2)}
.sdx__ctx button:disabled{opacity:.4;cursor:default}
.sdx__ctx span{flex:1}.sdx__ctx em{font-style:normal;font-size:11.5px;color:var(--sk-text-3)}
.sdx__ctx hr{border:0;height:1px;margin:5px 4px;background:var(--sk-fill-2)}
.sdx__sub{position:relative}.sdx__r{transform:rotate(-90deg)}
.sdx__subm{position:absolute;left:calc(100% + 4px);top:-6px;width:230px;padding:6px;border-radius:12px;background:var(--sk-raised);border:1px solid var(--sk-line-3);box-shadow:0 18px 50px rgb(var(--sk-sh) / var(--sk-sha-hi));display:none}
.sdx__sub:hover>.sdx__subm{display:block;animation:sdxPop .12s ease-out both}
.sdx__ctx.flip .sdx__subm{left:auto;right:calc(100% + 4px)}

/* photo cut-out */
.sdc{position:fixed;inset:0;z-index:1000;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;background:var(--sk-bg);color:var(--sk-text);animation:sdxIn .28s cubic-bezier(.2,.8,.2,1) both}
:where(.sdc) button{font:inherit;color:inherit;cursor:pointer}
.sdc__top{display:flex;align-items:center;gap:8px;padding:0 14px;height:52px;background:linear-gradient(180deg,var(--sk-surface),var(--sk-bg));flex-wrap:nowrap;overflow-x:auto}
.sdc__top>b{font-size:15px;margin-right:10px;white-space:nowrap}
.sdc__top button{height:34px;padding:0 13px;border:0;border-radius:9px;background:rgb(var(--sk-ov) / .14);font-weight:600;white-space:nowrap;transition:background .15s}.sdc__top button:hover{background:rgb(var(--sk-ov) / .26)}
.sdc__tools{display:flex;gap:4px}.sdc__tools button.is-on{background:#fff;color:var(--sk-on-accent)}
.sdc__sp{flex:1}.sdc__x{background:transparent!important;border:1px solid rgb(var(--sk-ov) / .4)!important}.sdc__ok{background:#fff!important;color:var(--sk-on-accent)!important;font-weight:700}
.sdc__bar{display:flex;gap:16px;align-items:center;min-height:46px;padding:6px 16px;background:var(--sk-surface);border-bottom:1px solid var(--sk-line);flex-wrap:wrap;font-size:12.5px}
.sdc__tip{color:var(--sk-text-2);flex:1;min-width:220px}.sdc__bar label{display:flex;align-items:center;gap:8px;color:var(--sk-text-2)}.sdc__bar input[type=range]{width:150px;accent-color:var(--sk-accent)}.sdc__bar em{font-style:normal;color:var(--sk-text);min-width:26px}
.sdc__go{height:34px;padding:0 16px;border:0;border-radius:9px;background:linear-gradient(90deg,var(--sk-accent),var(--sk-accent-2));color:var(--sk-text)!important;font-weight:700}
.sdc__seg{display:inline-flex;border:1px solid var(--sk-line-3);border-radius:9px;overflow:hidden}.sdc__seg button{height:32px;padding:0 13px;border:0;background:transparent;font-weight:600}.sdc__seg button.is-on{background:var(--sk-accent);color:var(--sk-text)}
.sdc__work{display:grid;place-items:center;min-height:0;min-width:0;background:var(--sk-canvas) radial-gradient(circle,var(--sk-dot) 1px,transparent 1px) 0 0/22px 22px;overflow:hidden}
.sdc__stage{position:relative;box-shadow:0 10px 50px rgba(0,0,0,.6);touch-action:none}.sdc__stage canvas{display:block;width:100%;height:100%;touch-action:none}
.sdc__box{position:absolute;border:2px dashed var(--sk-accent);background:var(--sk-accent-soft);pointer-events:none}.sdc__box[hidden]{display:none}
.sdc__ring{position:absolute;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px rgb(var(--sk-sh) / var(--sk-sha-hi));pointer-events:none}.sdc__ring[hidden]{display:none}
.sdc__busy{position:absolute;inset:0;display:grid;place-items:center;background:rgba(18,12,7,.55);font-weight:600;color:var(--sk-text);letter-spacing:.04em}.sdc__busy[hidden]{display:none}
.sdc__foot{display:flex;align-items:center;gap:6px;padding:0 16px;height:44px;background:var(--sk-surface);border-top:1px solid var(--sk-line);font-size:12.5px;overflow-x:auto}.sdc__foot>span:first-child{color:var(--sk-text-3);margin-right:4px}
.sdc__foot button{height:30px;padding:0 12px;border:1px solid var(--sk-fill-2);border-radius:15px;background:transparent;white-space:nowrap}.sdc__foot button.is-on{background:var(--sk-accent);border-color:var(--sk-accent);color:var(--sk-text);font-weight:700}.sdc__foot small{color:var(--sk-text-3);white-space:nowrap}

@media (max-width:900px){
  .sdx__main{grid-template-columns:60px minmax(0,1fr)}
  .sdx__rail{padding:6px 3px}.sdx__rail button{font-size:10px;padding:8px 0}
  .sdx__work{grid-column:2}
  .sdx__panel{position:absolute;left:60px;top:0;bottom:0;z-index:8;box-shadow:12px 0 30px rgb(var(--sk-sh) / var(--sk-sha-hi))}.sdx__panel,.sdx__pb{width:min(300px,calc(100vw - 60px))}.sdx__panel.is-shut{box-shadow:none}
  .sdx__open{left:60px;z-index:7}
  .sdx__ly{position:absolute;right:0;top:0;bottom:0;z-index:8;box-shadow:-12px 0 30px rgb(var(--sk-sh) / var(--sk-sha-hi))}.sdx__ly.is-open{width:min(290px,86vw)}
  .sdx__top{padding:0 6px;gap:2px;overflow-x:auto;scrollbar-width:none}.sdx__top::-webkit-scrollbar{display:none}
  .sdx__top>*{flex:none}.sdx__name{width:120px}.sdx__dim,.sdx__save{display:none}.sdx__back span{display:none}.sdx__back{padding:0 8px}.sdx__dlb span{display:none}
  .sdx__stagewrap{padding:16px}.sdx__bot input[type=range]{width:90px}
  .sdc__top{gap:6px}.sdc__tools button{padding:0 9px}
}
@media (prefers-reduced-motion:reduce){.sdx,.sdc,.sdx__pop,.sdx__ctx,.sdx__mini,.sdx__dlm{animation:none}.sdx__panel{transition:none}}

/* a more modern finish: rounder, softer, floating */
.sdx{font-family:Inter,"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:-.005em}
.sdx__top{box-shadow:0 1px 0 rgb(var(--sk-ov) / .12) inset,0 6px 24px rgba(20,10,60,.35)}
.sdx__tbtn{border-radius:10px}.sdx__dlb{border-radius:10px;box-shadow:0 2px 10px rgba(20,10,60,.25)}
.sdx__rail{background:var(--sk-bg);border-right:1px solid var(--sk-line);padding:10px 7px;gap:4px}
.sdx__rail button{border-radius:14px;padding:11px 2px;color:var(--sk-text-3)}.sdx__rail button.is-on{background:var(--sk-accent-soft);color:var(--sk-accent-text)}.sdx__rail button:hover{background:var(--sk-surface)}
.sdx__panel{background:var(--sk-surface);border-right:1px solid var(--sk-line)}
.sdx__work{background:var(--sk-canvas)}
.sdx__tool{margin:12px 16px 0;height:48px;border-radius:14px;background:rgba(37,37,45,.92);backdrop-filter:blur(12px);border:1px solid var(--sk-line-2);box-shadow:0 8px 28px rgb(var(--sk-sh) / var(--sk-sha-md))}
.sdx__tb,.sdx__tp{border-radius:9px}
.sdx__tp--font{border-radius:9px;border-color:var(--sk-line-2)}
.sdx__stagewrap{background:var(--sk-canvas) radial-gradient(circle,var(--sk-dot) 1px,transparent 1px) 0 0/24px 24px}
.sdx__stage{box-shadow:0 14px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.05)}
.sdx__bot{height:44px;background:transparent;border-top:0;justify-content:flex-end;padding:0 18px}
.sdx__bot input[type=range]{accent-color:var(--sk-accent)}
.sdx__pop,.sdx__ctx,.sdx__subm,.sdx__mini,.sdx__dlm{border-radius:14px;border-color:var(--sk-line-2);box-shadow:0 20px 60px rgb(var(--sk-sh) / var(--sk-sha-hi))}
.sdx__ly.is-open{border-left:1px solid var(--sk-line)}.sdx__ly{background:var(--sk-surface)}
.sdx__tpl,.sdx__els button,.sdx__tx button,.sdx__ups button,.sdx__logos button{border-radius:14px}
.sdx__tpl:hover,.sdx__els button:hover,.sdx__tx button:hover,.sdx__ups button:hover,.sdx__logos button:hover{border-color:var(--sk-accent)}
.sdx__chips button{border-radius:20px}.sdx__search{border-radius:12px;background:var(--sk-raised);border-color:var(--sk-line-2)}
.sdx__btn,.sdx__go,.sdc__go{border-radius:12px;box-shadow:0 4px 14px rgba(228,174,82,.4)}
.sdx__sw button.is-on{box-shadow:0 0 0 2px var(--sk-raised),0 0 0 4px var(--sk-accent)}
.sdx__sel{border-width:1.5px}.sdx__sel b,.sdx__rot{width:11px;height:11px;border-width:1.5px;box-shadow:0 1px 4px rgba(0,0,0,.4)}.sdx__rot{width:16px;height:16px}
.sdx__grp{border-width:1.5px}
.sdc{background:var(--sk-bg)}.sdc__bar,.sdc__foot{background:var(--sk-surface)}.sdc__work{background:var(--sk-canvas)}

/* Kalamandir identity: charcoal surfaces, gold accent, dark ink on gold */
.sdx__top{background:linear-gradient(180deg,var(--sk-surface),var(--sk-bg));box-shadow:inset 0 -1px 0 rgba(228,174,82,.4),0 8px 26px rgb(var(--sk-sh) / var(--sk-sha-md))}
.sdx__brand{display:inline-flex;align-items:center;gap:8px;margin:0 10px 0 4px;font-weight:700;letter-spacing:.02em;font-size:14px;color:var(--sk-text);white-space:nowrap}
.sdx__brand i{width:9px;height:9px;border-radius:50%;background:linear-gradient(135deg,var(--sk-accent-2),var(--sk-accent-3));box-shadow:0 0 12px rgba(228,174,82,.7)}.sdx__brand em{font-style:normal;color:var(--sk-accent-text)}
.sdx__back{background:var(--sk-line)}.sdx__back:hover{background:var(--sk-fill-2)}
.sdx__dlb{background:linear-gradient(90deg,var(--sk-accent),var(--sk-accent-2));color:var(--sk-on-accent)}
.sdx__chips button.is-on,.sdx__btn,.sdx__pill.is-on,.sdx__tp--hi,.sdx__go,.sdc__go,.sdc__seg button.is-on,.sdc__foot button.is-on{color:var(--sk-on-accent)!important}
.sdx__tp--hi:hover{color:var(--sk-on-accent)}
.sdc__top{background:linear-gradient(180deg,var(--sk-surface),var(--sk-bg));box-shadow:inset 0 -1px 0 rgba(228,174,82,.4)}.sdc__top button{background:var(--sk-line)}.sdc__top button:hover{background:var(--sk-fill-2)}
.sdc__tools button.is-on{background:var(--sk-accent);color:var(--sk-on-accent)}.sdc__ok{background:linear-gradient(90deg,var(--sk-accent),var(--sk-accent-2))!important;color:var(--sk-on-accent)!important}.sdc__x{background:transparent!important;border:1px solid var(--sk-line-3)!important}
.sdx__rail button.is-on{box-shadow:inset 3px 0 0 var(--sk-accent)}
.sdx__save{color:var(--sk-text-3)}.sdx__dim{color:var(--sk-text-3)}
.sdx__name:hover{background:var(--sk-line)}.sdx__name:focus{background:var(--sk-canvas);border-color:var(--sk-accent)}

/* the tool list looks like the portal's own sidebar */
.sdx__main{grid-template-columns:184px auto minmax(0,1fr) auto}
.sdx__rail{background:var(--side,#4A2F11);border-right:0;padding:18px 0;gap:0;color:var(--side-on,#F6EDE0)}
.sdx__sect{margin:0 0 6px;padding:0 22px;font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:rgba(246,237,224,.4)}
.sdx__rail button{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;padding:11px 22px;border-radius:0;border-left:3px solid transparent;font-size:15px;font-weight:500;color:rgba(246,237,224,.86);box-shadow:none;background:transparent;transition:background .15s,color .15s}
.sdx__rail button:hover{background:var(--side-hi,#5E3D16);color:var(--sk-text)}
.sdx__rail button.is-on{background:var(--side-hi,#5E3D16);color:var(--sk-text);border-left-color:var(--gold,#C58C36);font-weight:600;box-shadow:none}
.sdx__rail .sdx__i{width:19px;height:19px}
.sdx__open{left:184px}
/* templates: just the picture, no boxes around it */
.sdx__tgrid{gap:16px 12px}
.sdx__tpl{border:0;background:transparent;padding:0;border-radius:0;gap:7px}
.sdx__tpl:hover{border:0;transform:none;box-shadow:none}
.sdx__tth{display:block;height:auto;background:transparent;border-radius:10px;overflow:hidden;box-shadow:0 3px 12px rgb(var(--sk-sh) / var(--sk-sha-md));transition:transform .2s,box-shadow .2s}
.sdx__tth canvas{display:block;width:100%!important;height:auto!important;max-height:none!important;max-width:none}
.sdx__tpl:hover .sdx__tth{transform:translateY(-3px);box-shadow:0 10px 26px rgb(var(--sk-sh) / var(--sk-sha-hi)),0 0 0 2px var(--sk-accent)}
.sdx__tpl small{padding:0 2px;font-size:11.5px;color:var(--sk-text-2)}
.sdx__brandsec{margin-bottom:6px}.sdx__brandsec h4{margin-top:20px!important}.sdx__brandsec:first-child h4{margin-top:0!important}
.sdx__brandsec .sdx__sw{margin-top:10px}
@media (max-width:900px){.sdx__main{grid-template-columns:60px minmax(0,1fr)}.sdx__rail button{flex-direction:column;gap:4px;padding:9px 0;justify-content:center;font-size:10px;border-left:0;border-bottom:0}.sdx__rail button.is-on{box-shadow:inset 3px 0 0 var(--gold,#C58C36)}.sdx__sect{display:none}.sdx__open{left:60px}}

/* the opening logo */
.sdx-splash{position:fixed;inset:0;z-index:960;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse at 50% 46%,#22222b 0%,var(--sk-bg) 55%,var(--sk-canvas) 100%);animation:sdsIn .35s ease-out both;transition:opacity .5s ease,transform .5s ease}
.sdx-splash.is-out{opacity:0;transform:scale(1.05);pointer-events:none}
.sdx-splash__glow{position:absolute;left:50%;top:48%;width:min(900px,120vw);height:min(420px,60vw);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(228,174,82,.22),rgba(124,92,255,.10) 55%,transparent 72%);filter:blur(30px);opacity:0;animation:sdsGlow 1.6s ease .1s forwards}
.sdx-splash__in{position:relative;display:grid;gap:30px;justify-items:center;width:min(720px,86vw)}
.sdx-splash__logo{position:relative;width:100%;opacity:0}
.sdx-splash.is-go .sdx-splash__logo{opacity:1;animation:sdsLogo 1.2s cubic-bezier(.2,.8,.2,1) both,sdsFloat 3.4s ease-in-out 1.4s infinite}
.sdx-splash__logo img{display:block;width:100%;height:auto;filter:drop-shadow(0 10px 30px rgb(var(--sk-sh) / var(--sk-sha-hi)))}
.sdx-splash__shine{position:absolute;inset:0;pointer-events:none;-webkit-mask-size:100% 100%;mask-size:100% 100%;background:linear-gradient(105deg,transparent 38%,rgb(var(--sk-ov) / .9) 50%,transparent 62%) -160% 0/260% 100% no-repeat;mix-blend-mode:soft-light;opacity:0}
.sdx-splash.is-go .sdx-splash__shine{animation:sdsShine 1.5s ease-in-out 1s both}
.sdx-splash__bar{display:block;width:min(200px,48vw);height:2px;border-radius:2px;background:rgb(var(--sk-ov) / .1);overflow:hidden;opacity:0;animation:sdsIn .4s ease .7s forwards}
.sdx-splash__bar b{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--sk-accent-3),var(--sk-accent-2));animation:sdsBar 1.5s cubic-bezier(.3,.6,.3,1) .45s forwards}
@keyframes sdsIn{from{opacity:0}to{opacity:1}}
@keyframes sdsGlow{to{opacity:1}}
@keyframes sdsLogo{0%{opacity:0;transform:scale(.86) translateY(16px);filter:blur(12px)}60%{opacity:1;filter:blur(0)}100%{opacity:1;transform:none;filter:blur(0)}}
@keyframes sdsFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes sdsShine{0%{opacity:1;background-position:-160% 0}100%{opacity:1;background-position:160% 0}}
@keyframes sdsBar{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.sdx-splash__logo,.sdx-splash__bar,.sdx-splash__glow,.sdx-splash__shine{animation:none!important;opacity:1}.sdx-splash__bar b{transform:none;animation:none}}

/* the tool rail, Canva style: narrow, icon over a small label, the open tool in a rounded tile */
.sdx__main{grid-template-columns:78px auto minmax(0,1fr) auto}
.sdx__rail{background:var(--sk-bg);border-right:1px solid var(--sk-line);padding:10px 7px;gap:4px;color:var(--sk-text-3)}
.sdx__rail button{display:grid;place-items:center;align-content:center;gap:5px;flex-direction:initial;padding:11px 2px;border-radius:14px;border-left:0;font-size:11px;font-weight:600;letter-spacing:0;color:var(--sk-text-3);background:transparent;box-shadow:none}
.sdx__rail button:hover{background:var(--sk-surface);color:var(--sk-text)}
.sdx__rail button.is-on{background:var(--sk-accent-soft);color:var(--sk-accent-text);border-left:0;box-shadow:none}
.sdx__rail .sdx__i{width:22px;height:22px}
.sdx__open{left:78px}
@media (max-width:900px){.sdx__main{grid-template-columns:62px minmax(0,1fr)}.sdx__open{left:62px}.sdx__rail button.is-on{box-shadow:none}}

/* the rail: every tool the same size, icon over label, perfectly centred */
.sdx__rail{align-items:stretch}
.sdx__rail button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:100%;height:64px;padding:0;text-align:center;line-height:1.1;border-radius:14px;margin:0}
.sdx__rail button span{display:block;width:100%;text-align:center}
.sdx__rail button.is-on{background:var(--sk-accent-soft);color:var(--sk-accent-text)}
.sdx__rail button:not(.is-on):hover{background:var(--sk-surface);color:var(--sk-text)}

/* the home */
.sdh__hero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:34px 40px;border-radius:24px;background:radial-gradient(ellipse at 20% 0%,#2b2b36 0%,#17171c 60%,#101014 100%);color:#f3f3f8;box-shadow:0 18px 50px rgba(20,14,40,.28)}
.sdh__glow{position:absolute;left:-6%;top:-40%;width:620px;height:420px;border-radius:50%;background:radial-gradient(closest-side,rgba(228,174,82,.26),rgba(124,92,255,.10) 60%,transparent);filter:blur(36px);pointer-events:none}
.sdh__txt{position:relative;max-width:640px;flex:1;min-width:0}
.sdh__logo{display:block;width:min(360px,70%);height:auto;margin:0 0 18px;min-height:40px;filter:drop-shadow(0 6px 20px rgba(0,0,0,.5))}
.sdh__hero h2{margin:0;font-size:30px;line-height:1.15;letter-spacing:-.025em;font-weight:700;color:#fff}
.sdh__hero p{margin:10px 0 0;max-width:54ch;font-size:14px;line-height:1.6;color:rgba(243,243,248,.7)}
.sdh__go{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:22px}
.sdh__search{display:flex;align-items:center;gap:10px;flex:1;min-width:230px;max-width:430px;height:46px;padding:0 16px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:rgba(243,243,248,.6);transition:border-color .2s,background .2s}
.sdh__search:focus-within{border-color:#E4AE52;background:rgba(255,255,255,.12)}.sdh__search input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:#fff;font:inherit;font-size:14px}.sdh__search input::placeholder{color:rgba(243,243,248,.5)}
.sdh__cta{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 22px;border:0;border-radius:14px;background:linear-gradient(90deg,#E4AE52,#F2C46B);color:#241706;font:inherit;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 8px 22px rgba(228,174,82,.35);transition:transform .15s,box-shadow .15s}
.sdh__cta:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(228,174,82,.45)}
.sdh__art{position:relative;z-index:1;flex:none;width:300px;height:210px}
.sdh__art i{position:absolute;border-radius:14px;box-shadow:0 14px 34px rgba(0,0,0,.5)}
.sdh__art .a1{left:10px;top:34px;width:128px;height:168px;background:linear-gradient(160deg,#4A2F11,#1c1208);border:1px solid rgba(228,174,82,.4);transform:rotate(-9deg)}
.sdh__art .a2{left:96px;top:6px;width:140px;height:140px;background:linear-gradient(135deg,#F2C46B,#C98A2B);transform:rotate(5deg)}
.sdh__art .a3{left:168px;top:66px;width:112px;height:140px;background:linear-gradient(160deg,#fff,#efe3cc);transform:rotate(11deg)}
.sdh__sec{margin-top:6px}
.sdh__sizes{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 14px;scrollbar-width:thin}
.sdh__size{flex:none;display:grid;justify-items:center;align-content:start;gap:4px;width:138px;padding:14px 10px 12px;border:1px solid var(--edge);border-radius:16px;background:#fff;cursor:pointer;font:inherit;text-align:center;transition:transform .2s,box-shadow .2s,border-color .2s}
.sdh__size:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(80,56,20,.14);border-color:#D9B66B}
.sdh__shape{display:grid;place-items:center;height:60px}.sdh__shape i{display:block;border:2px solid #C58C36;border-radius:5px;background:linear-gradient(160deg,#FBF1DC,#F3DFB6)}
.sdh__size b{font-size:13px;font-weight:600;color:var(--ink);line-height:1.25}.sdh__size small{font-size:11.5px;color:var(--ink-3)}
.sdh__size--c{cursor:default}.sdh__size--c:hover{transform:none;box-shadow:none;border-color:var(--edge)}
.sdh__cw{display:flex;align-items:center;gap:4px;margin-top:4px}.sdh__cw input{width:46px;height:28px;padding:0 4px;border:1px solid var(--edge);border-radius:8px;font:inherit;font-size:12px;text-align:center}.sdh__cw em{font-style:normal;color:var(--ink-3)}
.sdh__cw button{height:28px;padding:0 10px;border:0;border-radius:8px;background:#3A2A0C;color:#fff;font:inherit;font-size:12px;font-weight:600;cursor:pointer}.sdh__cw button:hover{background:#C58C36}
.sdh__empty{grid-column:1/-1;display:grid;gap:4px;padding:22px 24px;border:1.5px dashed #DCC79C;border-radius:16px;background:#FFFBF2;font-size:13px;color:var(--ink-2)}.sdh__empty b{font-size:14px;color:var(--ink)}
.sd__chips sup{margin-left:5px;font-size:10px;opacity:.6}
.sdh__tpl .sd__cth{position:relative;background:linear-gradient(180deg,#F6F0E4,#EFE6D4)}
.sdh__tpl .sd__cth img{max-width:100%;max-height:198px;width:auto;height:auto;display:block;border-radius:4px;box-shadow:0 3px 12px rgba(0,0,0,.22);transition:transform .25s}
.sdh__tpl:hover .sd__cth img{transform:scale(1.04)}
.sdh__use{position:absolute;left:50%;bottom:12px;transform:translate(-50%,8px);padding:7px 14px;border-radius:20px;background:#241706;color:#F2C46B;font-size:12px;font-weight:700;white-space:nowrap;opacity:0;transition:opacity .2s,transform .2s;z-index:2}
.sdh__tpl:hover .sdh__use{opacity:1;transform:translate(-50%,0)}
@media (max-width:980px){.sdh__art{display:none}}
@media (max-width:760px){.sdh__hero{padding:24px 20px}.sdh__hero h2{font-size:23px}}
.sd{grid-template-columns:minmax(0,1fr)}

/* no boxes: pictures stand on their own, name underneath */
.sd--home .sd__card{border:0;background:transparent;padding:0;border-radius:0;box-shadow:none;gap:6px;align-content:start;transform:none}
.sd--home .sd__card:hover{box-shadow:none;transform:none;border:0}
.sd--home .sd__cth{display:block;height:auto;min-height:0;background:transparent;margin:0;border-radius:12px;overflow:hidden;position:relative;box-shadow:0 4px 16px rgba(60,42,12,.16);transition:transform .25s,box-shadow .25s}
.sd--home .sd__cth img{display:block;width:100%;height:auto;max-width:none;max-height:none;border-radius:0;box-shadow:none;transform:none!important}
.sd--home .sd__card:hover .sd__cth{transform:translateY(-4px);box-shadow:0 14px 32px rgba(60,42,12,.26),0 0 0 2px #E4AE52}
.sd--home .sd__card b{padding:4px 2px 0}.sd--home .sd__card small{padding:0 2px}
.sd--home .sd__cact{top:10px;right:10px}
.sd--home .sdh__tpl .sd__cth{background:transparent}
.sd--home .sd__hgrid{gap:22px 18px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));align-items:start}
.sdh__size{border:0;background:transparent;box-shadow:none;padding:8px 6px}
.sdh__size:hover{background:rgba(228,174,82,.12);box-shadow:none;transform:translateY(-2px)}
.sdh__size--c:hover{background:transparent}
.sdh__shape{height:64px}

/* swipe rows */
.sdh__ch{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px}.sdh__ch h3{margin:0;font-size:17px;font-weight:700;color:var(--ink)}.sdh__ch h4{margin:0;font-size:14px;font-weight:600;color:var(--ink-2)}.sdh__ch sup{margin-left:6px;font-size:10px;opacity:.55}
.sdh__cat{margin-top:6px}
.sdh__arr{display:inline-flex;gap:6px}.sdh__arr button{width:32px;height:32px;border:1px solid var(--edge);border-radius:50%;background:#fff;color:#6B5B41;display:grid;place-items:center;cursor:pointer;transition:background .15s,color .15s,border-color .15s}.sdh__arr button:hover{background:#3A2A0C;border-color:#3A2A0C;color:#fff}
.sdh__row{display:flex;gap:18px;overflow-x:auto;overflow-y:hidden;padding:6px 4px 20px;scroll-snap-type:x proximity;scroll-padding:0 4px;scrollbar-width:none;overscroll-behavior-x:contain;cursor:grab;-webkit-overflow-scrolling:touch}
.sdh__row::-webkit-scrollbar{display:none}.sdh__row.is-drag{cursor:grabbing;scroll-snap-type:none;user-select:none}
.sdh__row .sd__card{flex:none;width:200px;scroll-snap-align:start}
.sdh__row .sdh__empty{flex:1;min-width:280px}
.sdh__row .sd__hint{margin:8px 0}
.sd--home .sdh__row .sd__cth img{pointer-events:none;-webkit-user-drag:none}

.sdx__brand{margin:0 12px 0 6px}.sdx__brand img{display:block;height:26px;width:auto;min-width:120px;filter:drop-shadow(0 2px 8px rgb(var(--sk-sh) / var(--sk-sha-hi)))}
@media (max-width:900px){.sdx__brand img{height:20px;min-width:0}}

.sdh__art i.has-img{background-size:cover;background-position:center;border:0;box-shadow:0 18px 40px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.12)}
.sdh__art i{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.sdh__hero:hover .sdh__art .a1{transform:rotate(-12deg) translateX(-6px)}.sdh__hero:hover .sdh__art .a2{transform:rotate(3deg) translateY(-6px)}.sdh__hero:hover .sdh__art .a3{transform:rotate(14deg) translateX(6px)}
.sdh__art .a1{width:132px;height:170px}.sdh__art .a2{width:150px;height:150px}.sdh__art .a3{width:120px;height:150px}

/* sizes: plain wrapping chips, no scrolling */
.sdh__sub{font-size:12.5px;color:var(--ink-3)}
.sdh__sizes{display:flex;flex-wrap:wrap;gap:10px;overflow:visible;padding:2px 0 8px}
.sdh__size{display:flex;align-items:center;gap:11px;width:auto;padding:9px 16px 9px 11px;border:1px solid var(--edge);border-radius:14px;background:#fff;text-align:left;justify-items:initial}
.sdh__size:hover{background:#FFF8EA;border-color:#D9B66B;transform:translateY(-2px);box-shadow:0 8px 20px rgba(80,56,20,.12)}
.sdh__shape{display:grid;place-items:center;width:30px;height:30px;flex:none}
.sdh__lb{display:grid;gap:1px;line-height:1.2}.sdh__lb b{font-size:13px;font-weight:600;color:var(--ink)}.sdh__lb small{font-size:11.5px;color:var(--ink-3)}
.sdh__size--c{cursor:default}.sdh__size--c:hover{transform:none;box-shadow:none;background:#fff;border-color:var(--edge)}
.sdh__cw{display:flex;align-items:center;gap:5px;margin-top:3px}.sdh__cw input{width:58px;height:28px;padding:0 6px;border:1px solid var(--edge);border-radius:8px;font:inherit;font-size:12.5px;text-align:center}
.sdh__cw button{height:28px;padding:0 12px;border:0;border-radius:8px;background:#3A2A0C;color:#fff;font:inherit;font-size:12px;font-weight:600;cursor:pointer}.sdh__cw button:hover{background:#C58C36}

/* elements panel */
.sdx__mt{margin-top:12px}
.sdx__es{margin-top:16px}.sdx__es:first-of-type{margin-top:14px}
.sdx__eh{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.sdx__eh h4{margin:0!important}
.sdx__eh button{border:0;background:transparent;color:var(--sk-text-3);font-size:12px;font-weight:600;cursor:pointer;padding:2px 4px;border-radius:6px}.sdx__eh button:hover{color:var(--sk-accent-text)}
.sdx__er{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;padding:2px 2px 8px;scrollbar-width:none;cursor:grab}.sdx__er::-webkit-scrollbar{display:none}
.sdx__er.is-all{flex-wrap:wrap;overflow:visible}
.sdx__et{flex:none;width:58px;height:58px;padding:7px;border:0;border-radius:12px;background:var(--sk-raised);cursor:pointer;display:grid;place-items:center;transition:background .15s,transform .15s}
.sdx__et:hover{background:var(--sk-fill-2);transform:translateY(-2px)}.sdx__et img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
/* text styles */
.sdx__qt{display:grid;gap:8px;margin:12px 0 4px}.sdx__qt button{padding:11px 14px;border:0;border-radius:12px;background:var(--sk-raised);color:var(--sk-text);text-align:left;cursor:pointer;transition:background .15s}.sdx__qt button:hover{background:var(--sk-fill-2)}
.sdx__chips--row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:12px -2px 12px;padding:0 2px}.sdx__chips--row::-webkit-scrollbar{display:none}.sdx__chips--row button{flex:none;white-space:nowrap}
.sdx__tsg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sdx__ts{display:grid;place-items:center;min-height:92px;padding:10px 8px;border:0;border-radius:12px;cursor:pointer;overflow:hidden;transition:transform .18s,box-shadow .18s}
.sdx__ts.is-dk{background:#1a1a21}.sdx__ts.is-lt{background:#f1ece2}
.sdx__ts:hover{transform:translateY(-2px);box-shadow:0 0 0 2px var(--sk-accent),0 10px 22px rgb(var(--sk-sh) / var(--sk-sha-md))}
.sdx__ts>span{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:100%;pointer-events:none}.sdx__ts>span>span{display:block;white-space:nowrap;max-width:100%}
/* tools */
.sdx__tl{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.sdx__tl button{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--sk-line-2);border-radius:12px;background:var(--sk-raised);color:var(--sk-text);cursor:pointer;font-weight:600;font-size:13px;transition:border-color .15s,background .15s}
.sdx__tl button:hover{border-color:var(--sk-text-4)}.sdx__tl button.is-on{background:var(--sk-accent-soft);border-color:var(--sk-accent);color:var(--sk-accent-text)}
.sdx__seg{display:flex;border:1px solid var(--sk-line-2);border-radius:10px;overflow:hidden}.sdx__seg button{flex:1;padding:8px 6px;border:0;background:transparent;color:var(--sk-text-2);font-weight:600;font-size:12px;cursor:pointer;border-right:1px solid var(--sk-line-2)}.sdx__seg button:last-child{border-right:0}.sdx__seg button.is-on{background:var(--sk-accent);color:var(--sk-on-accent)}
.sdx__f em{font-style:normal;color:var(--sk-text);text-transform:none;letter-spacing:0;margin-left:6px}
.sdx__v{font-style:normal;color:var(--sk-text);margin-left:6px;text-transform:none}
.sdx__mchip{position:absolute;left:50%;top:66px;transform:translateX(-50%);z-index:9;display:flex;align-items:center;gap:12px;padding:7px 8px 7px 16px;border-radius:24px;background:rgba(37,37,45,.96);border:1px solid var(--sk-accent);box-shadow:0 10px 30px rgb(var(--sk-sh) / var(--sk-sha-hi));font-size:13px;font-weight:600;color:var(--sk-text);white-space:nowrap}
.sdx__mchip[hidden]{display:none}.sdx__mchip button{height:28px;padding:0 14px;border:0;border-radius:14px;background:var(--sk-accent);color:var(--sk-on-accent);font-weight:700;cursor:pointer}
.sdx__work{position:relative}
/* guides */
.sdx__gd{display:none;position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(#ff4d8d,#ff4d8d) 50% 0/1px 100% no-repeat,linear-gradient(#ff4d8d,#ff4d8d) 0 50%/100% 1px no-repeat}
.show-guides .sdx__gd{display:block}.sdx__gd::after{content:"";position:absolute;inset:5%;border:1px dashed rgba(255,77,141,.7)}
/* file menu, find, versions */
.sdx__fh{display:grid;gap:3px;padding:2px 4px 10px;border-bottom:1px solid var(--sk-line-2);margin-bottom:6px}.sdx__fh small{color:var(--sk-text-3);font-size:12px}
.sdx__fname,.sdx__inp{width:100%;height:36px;padding:0 10px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--sk-text);font-size:15px;font-weight:700}.sdx__fname:hover{border-color:var(--sk-line-2)}.sdx__fname:focus,.sdx__inp:focus{outline:0;border-color:var(--sk-accent);background:var(--sk-input)}
.sdx__inp{border-color:var(--sk-line-3);background:var(--sk-input);font-size:13px;font-weight:400}
.sdx__menu hr{border:0;height:1px;background:var(--sk-line-2);margin:5px 4px}
.sdx__menu .sdx__r{margin-left:auto;transform:rotate(-90deg);flex:none}.sdx__menu em+.sdx__r{margin-left:6px}
.sdx__back2{display:flex;align-items:center;gap:6px;padding:4px 8px 10px 2px;border:0;background:transparent;color:var(--sk-text-3);font-weight:600;cursor:pointer}.sdx__back2:hover{color:var(--sk-text)}
.sdx__vl{display:grid;gap:3px;max-height:320px;overflow:auto}.sdx__vl button{display:flex;justify-content:space-between;gap:12px;padding:9px 11px;border:0;border-radius:8px;background:transparent;color:var(--sk-text);cursor:pointer;text-align:left}.sdx__vl button:hover{background:var(--sk-fill-2)}.sdx__vl button.is-on{background:var(--sk-accent-soft);color:var(--sk-accent-text)}.sdx__vl small{color:var(--sk-text-3)}
/* sharing */
.sdx__pl{display:grid;gap:4px;margin:8px 0}
.sdx__pl>button,.sdx__pr{display:flex;align-items:center;gap:10px;padding:7px 8px;border:0;border-radius:10px;background:transparent;color:var(--sk-text);text-align:left;cursor:pointer}.sdx__pl>button:hover{background:var(--sk-fill-2)}
.sdx__pl i,.sdx__pr i{flex:none;width:32px;height:32px;border-radius:50%;background:#4b4b5c;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:700;color:var(--sk-text)}.sdx__pr i.me{background:linear-gradient(135deg,var(--sk-accent),var(--sk-accent-3));color:var(--sk-on-accent)}
.sdx__pl span,.sdx__pr span{flex:1;min-width:0;display:grid;font-weight:600;font-size:13px}.sdx__pr span small{font-weight:400;color:var(--sk-text-3);font-size:11.5px}
.sdx__pl em{font-style:normal;color:var(--sk-accent-text);font-size:12px;font-weight:700}
.sdx__pr select{height:30px;border:1px solid var(--sk-line-3);border-radius:8px;background:var(--sk-input);color:var(--sk-text);font-size:12px;padding:0 6px}
.sdx__pr button{flex:none;width:30px;height:30px;border:0;border-radius:8px;background:transparent;color:var(--sk-text-3);cursor:pointer;display:grid;place-items:center}.sdx__pr button:hover{background:var(--sk-fill-2);color:var(--sk-text)}
.sdx__acc{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:var(--sk-input);font-weight:600;font-size:13px}.sdx__acc .sdx__i{width:20px;height:20px;color:var(--sk-accent-text)}
.sdx__tag{padding:5px 12px;border-radius:14px;background:rgb(var(--sk-ov) / .12);font-size:12px;font-weight:600;color:var(--sk-text);white-space:nowrap}
.sdh__badge{position:absolute;left:8px;top:8px;display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:12px;background:rgba(36,23,6,.86);color:#F2C46B;font-size:11px;font-weight:700;z-index:2}.sdh__badge .sdx__i{width:13px;height:13px}
/* effects and border styles */
.sdx__fxg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:6px}
.sdx__fxg button{display:grid;place-items:center;gap:4px;padding:10px 4px 7px;border:1px solid var(--sk-line-2);border-radius:12px;background:#1a1a21;color:var(--sk-text-2);cursor:pointer}.sdx__fxg button:hover{border-color:var(--sk-text-4)}.sdx__fxg button.is-on{border-color:var(--sk-accent);color:var(--sk-accent-text)}
.sdx__fxg small{font-size:11px}.sdx__fxp{font-size:26px;font-weight:800;color:var(--sk-text);line-height:1}
.sdx__fxp--shadow{text-shadow:0 3px 6px rgb(var(--sk-sh) / var(--sk-sha-hi))}.sdx__fxp--lift{text-shadow:0 8px 12px rgb(var(--sk-sh) / var(--sk-sha-hi))}.sdx__fxp--hard{text-shadow:4px 4px 0 var(--sk-accent)}.sdx__fxp--glow{text-shadow:0 0 12px #FFD54A,0 0 4px #FFD54A}.sdx__fxp--outline{-webkit-text-stroke:2px var(--sk-accent);paint-order:stroke fill}.sdx__fxp--hollow{color:transparent;-webkit-text-stroke:1.5px #fff}
.sdx__bs{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:8px}.sdx__bs button{height:38px;border:1px solid var(--sk-line-2);border-radius:10px;background:var(--sk-input);cursor:pointer;display:grid;place-items:center}.sdx__bs button:hover{border-color:var(--sk-text-4)}.sdx__bs button.is-on{border-color:var(--sk-accent);background:var(--sk-accent-soft)}
.sdx__bs i{display:block;width:26px;height:0;border-top:3px solid var(--sk-text)}.sdx__bs i.b-none{border-top:0;width:18px;height:18px;border:2px solid var(--sk-text-3);border-radius:50%;background:linear-gradient(135deg,transparent 45%,var(--sk-text-3) 45%,var(--sk-text-3) 55%,transparent 55%)}.sdx__bs i.b-dash{border-top-style:dashed}.sdx__bs i.b-long{border-top-style:dashed;border-image:repeating-linear-gradient(90deg,var(--sk-text) 0 10px,transparent 10px 15px) 1}.sdx__bs i.b-dot{border-top-style:dotted}
.sdx__tp--hi{white-space:nowrap}
.sdx__ang{font-variant-numeric:tabular-nums}

/* phone: the way Canva's phone editor sits. A slim bar on top, the page big, the tools along the bottom,
   the panel sliding up from the bottom, and what you select swaps the tool bar for that thing's own tools */
@media (max-width:900px){
  .sdx__top{height:48px}.sdx__top [data-pop=resize],.sdx__top [data-act=save]{display:none}.sdx__dlb{padding:0 12px}
  .sdx__main{grid-template-columns:minmax(0,1fr);position:relative}
  .sdx__work{grid-column:1;padding-bottom:64px;grid-template-rows:minmax(0,1fr)}
  .sdx__bot{display:none}
  .sdx__stagewrap{padding:14px 12px}
  .sdx__rail{position:absolute;left:0;right:0;bottom:0;z-index:6;height:64px;flex-direction:row;gap:0;padding:4px 6px calc(4px + env(safe-area-inset-bottom,0px));overflow-x:auto;border-right:0;border-top:1px solid var(--sk-line);background:var(--sk-bg);scrollbar-width:none}
  .sdx__rail::-webkit-scrollbar{display:none}.sdx__rail button{flex:none;width:76px;height:56px}
  .sdx.has-sel .sdx__rail,.sdx.has-tool .sdx__rail{visibility:hidden}
  .sdx__tool{display:none;position:absolute;left:0;right:0;bottom:0;top:auto;margin:0;height:64px;border-radius:0;border-width:1px 0 0;z-index:7;padding:0 10px calc(0px + env(safe-area-inset-bottom,0px));background:var(--sk-surface);backdrop-filter:none}
  .sdx.has-sel .sdx__tool,.sdx.has-tool .sdx__tool{display:flex}
  .sdx__tp,.sdx__tb{height:44px;min-width:44px}.sdx__tp--font{min-width:140px}
  .sdx__panel{position:absolute;left:0;right:0;bottom:64px;top:auto;width:auto;height:min(58vh,520px);z-index:8;border-radius:18px 18px 0 0;border-right:0;box-shadow:0 -14px 40px rgb(var(--sk-sh) / var(--sk-sha-hi));transition:transform .32s cubic-bezier(.2,.8,.2,1)}
  .sdx__panel.is-shut{width:auto;transform:translateY(125%);opacity:1;box-shadow:none}.sdx__pb{width:100%;padding-top:26px}
  .sdx__shut{top:0;left:0;right:0;width:100%;height:26px;transform:none;border-radius:18px 18px 0 0;background:transparent}.sdx__shut .sdx__i{display:none}.sdx__shut::after{content:"";width:44px;height:5px;border-radius:3px;background:#55556a}
  .sdx__open{display:none!important}
  .sdx__ly{position:absolute;left:0;right:0;bottom:64px;top:auto;width:100%!important;height:0;z-index:8;border-radius:18px 18px 0 0;transition:height .3s cubic-bezier(.2,.8,.2,1)}.sdx__ly.is-open{height:min(50vh,440px);border-left:0;box-shadow:0 -14px 40px rgb(var(--sk-sh) / var(--sk-sha-hi))}
  .sdx__lyh,.sdx__lyb,.sdx__lyt{width:100%}
  .sdx__pop{left:8px!important;right:8px;top:auto!important;bottom:76px;width:auto!important;max-height:52vh!important}
  .sdx.has-sel .sdx__pop,.sdx.has-tool .sdx__pop{bottom:76px}
  .sdx__mini{transform:translateX(-50%) scale(1)}
  .sdx__mchip{top:56px;max-width:92vw;white-space:normal}
  .sdx__name{display:none}
}

.sdx__kl{display:grid;gap:1px;max-height:60vh;overflow:auto;margin:0 -4px}.sdx__kl div{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:7px 8px;border-radius:7px;font-size:12.5px}.sdx__kl div:nth-child(odd){background:var(--sk-fill)}.sdx__kl kbd{font:inherit;font-size:11.5px;color:var(--sk-accent-text);background:var(--sk-bg);padding:2px 8px;border-radius:6px;white-space:nowrap}

/* icon-only buttons */
.sdx__chip--i{width:38px;height:36px;padding:0;justify-content:center}.sdx__chip--i .sdx__i{width:19px;height:19px}.sdx__chip.is-on{border-color:var(--sk-accent);background:var(--sk-accent-soft);color:var(--sk-accent-text)}
.sdx__sp1{flex:1;display:grid;place-items:center;height:36px}.sdx__sp1 svg{width:34px;height:18px}
.sdx__seg .sdx__sp1{padding:0}

/* the Tools palette: a floating column of icons beside the rail */
.sdx__pal{position:fixed;z-index:20;display:flex;gap:12px;align-items:flex-start;animation:sdxPop .18s ease-out both}.sdx__pal[hidden]{display:none}
.sdx__px{position:absolute;left:0;top:-48px;width:40px;height:40px;border-radius:50%;border:1px solid var(--sk-line-2);background:var(--sk-raised);color:var(--sk-text);display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 24px rgb(var(--sk-sh) / var(--sk-sha-hi))}.sdx__px:hover{background:var(--sk-fill-2)}
.sdx__pv{display:grid;gap:4px;padding:8px;border-radius:26px;background:var(--sk-raised);border:1px solid var(--sk-line-2);box-shadow:0 16px 44px rgb(var(--sk-sh) / var(--sk-sha-hi))}
.sdx__pt{width:48px;height:48px;border:0;border-radius:16px;background:transparent;color:var(--sk-text);display:grid;place-items:center;cursor:pointer;transition:background .15s}.sdx__pt .sdx__i{width:25px;height:25px}
.sdx__pt:hover{background:var(--sk-fill-2)}.sdx__pt.is-on{background:rgba(228,174,82,.2)}
.sdx__pt--draw{color:#ff6b7a}.sdx__pt--eraser{color:#f0a6d0}.sdx__pt--line{color:#5b9bff}.sdx__pt--note{color:#ffd84d}.sdx__pt--text{color:var(--sk-accent-text)}.sdx__pt--table{color:var(--sk-text)}.sdx__pt--sig{color:var(--sk-text)}
.sdx__po{width:250px;padding:14px;border-radius:18px;background:var(--sk-raised);border:1px solid var(--sk-line-2);box-shadow:0 16px 44px rgb(var(--sk-sh) / var(--sk-sha-hi));max-height:70vh;overflow:auto}.sdx__po h4{margin:14px 0 8px;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--sk-text-3)}.sdx__po h4:first-child{margin-top:0}
@media (max-width:900px){
  .sdx__pal{left:8px!important;right:8px;top:auto!important;bottom:72px;flex-direction:column;align-items:stretch}
  .sdx__pv{display:flex;overflow-x:auto;border-radius:22px;padding:6px 8px}.sdx__px{top:-46px}.sdx__po{width:auto;max-height:36vh}
}

.sdx__live{position:absolute;left:50%;top:66px;transform:translateX(-50%);z-index:12;display:flex;align-items:center;gap:10px;padding:8px 10px 8px 16px;border-radius:26px;background:var(--sk-glass);border:1px solid var(--sk-accent);box-shadow:0 12px 34px rgb(var(--sk-sh) / var(--sk-sha-hi));font-size:13px;font-weight:600;color:var(--sk-text);white-space:nowrap;animation:sdxPop .2s ease-out both}.sdx__live[hidden]{display:none}
.sdx__live span{display:flex;align-items:center;gap:8px}.sdx__live .sdx__i{color:var(--sk-accent-text)}
.sdx__live button{height:30px;padding:0 14px;border:0;border-radius:15px;background:var(--sk-fill-2);color:var(--sk-text);font-weight:600;cursor:pointer}.sdx__live button:first-of-type{background:var(--sk-accent);color:var(--sk-on-accent)}
@media (max-width:900px){.sdx__live{max-width:94vw;flex-wrap:wrap;white-space:normal;border-radius:18px}}

.sdx__lv{display:inline-flex;flex:none;border:1px solid var(--sk-line-3);border-radius:10px;overflow:hidden}.sdx__lv button{width:34px;height:30px;border:0;background:transparent;color:var(--sk-text-3);cursor:pointer;display:grid;place-items:center;padding:0}.sdx__lv button:hover{background:var(--sk-fill-2);color:var(--sk-text)}.sdx__lv button.is-on{background:var(--sk-accent);color:var(--sk-on-accent)}.sdx__lv .sdx__i{width:16px;height:16px}
.sdx__addas{display:flex;justify-content:space-between;align-items:center;margin:10px 2px 2px;font-size:12.5px;font-weight:600;color:var(--sk-text-2)}
.sdx__pr .sdx__lv+button{margin-left:2px}
.sdx__pr .sdx__lv,.sdx__addas .sdx__lv{display:inline-flex;flex:none;font-weight:400}

/* the portal's dialogs and messages must show above the full-screen editor */
body.sdx-open .modal{z-index:1200!important}
body.sdx-open .toast{z-index:1300!important}

.sdx__up{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:repeating-conic-gradient(var(--sk-fill) 0 25%,var(--sk-raised) 0 50%) 0 0/16px 16px}
.sdx__up>button:first-child{position:absolute;inset:0;width:100%;height:100%;padding:0;border:1px solid var(--sk-line-2);border-radius:10px;background:transparent;cursor:pointer;overflow:hidden}.sdx__up>button:first-child:hover{border-color:var(--sk-accent)}
.sdx__up img{width:100%;height:100%;object-fit:contain;display:block;opacity:0;transition:opacity .25s}.sdx__up img[src]{opacity:1}
.sdx__upx{position:absolute;right:6px;top:6px;width:26px;height:26px;border:0;border-radius:50%;background:rgba(20,20,26,.85);color:var(--sk-text);display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .15s}.sdx__upx .sdx__i{width:14px;height:14px}.sdx__up:hover .sdx__upx{opacity:1}.sdx__upx:hover{background:#c0392b}
.sdx__up.is-bad{opacity:.4}
@media (hover:none){.sdx__upx{opacity:1}}

/* the opening film: black blended into the dark screen, soft at the edges */
.sdx-splash__vw{position:relative;width:min(1000px,96vw);display:none}
.sdx-splash:not(.is-fb) .sdx-splash__vw{display:block}
.sdx-splash:not(.is-fb) .sdx-splash__in{display:none}
.sdx-splash.is-fb .sdx-splash__vw{display:none}
.sdx-splash__vid{display:block;width:100%;height:auto;pointer-events:none;background:#000;outline:0;border:0}
.sdx-splash{cursor:pointer}
@media (max-width:700px){.sdx-splash__vw{width:112vw;margin-left:-6vw}}

/* the film is used as it is, on its own black: the whole screen is that same black, so the picture has no edges to see */
.sdx-splash:not(.is-fb){background:#000}
.sdx-splash:not(.is-fb) .sdx-splash__glow{display:none}

.sdx-splash__pb{position:absolute;left:50%;top:71%;transform:translateX(-50%);width:min(240px,52vw);height:2px;border-radius:2px;background:rgb(var(--sk-ov) / .14);overflow:hidden}
.sdx-splash__pb b{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--sk-accent-3),var(--sk-accent-2))}

.sdx-splash__by{position:absolute;left:0;right:0;bottom:calc(26px + env(safe-area-inset-bottom,0px));margin:0;text-align:center;font-size:6px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:rgb(var(--sk-ov) / .5);opacity:0;animation:sdsIn .8s ease .5s forwards;pointer-events:none}

/* the banner logo: a film first, then the still picture in the same place */
.sdh__logowrap{position:relative;width:min(360px,70%);margin:0 0 18px}
.sdh__logowrap .sdh__logo{width:100%;margin:0;opacity:0;transition:opacity .7s ease}
.sdh__logowrap.is-still .sdh__logo{opacity:1}
.sdh__logov{position:absolute;left:50%;top:50%;width:122%;max-width:none;height:auto;transform:translate(-50%,-50%);mix-blend-mode:screen;pointer-events:none;transition:opacity .7s ease}
.sdh__logowrap.is-still .sdh__logov{opacity:0}

/* pictures: adjustments, filters, masks, frames (studio-photo.js) */
.sdx__atabs{display:flex;gap:4px;flex-wrap:wrap;margin:0 0 10px}
.sdx__atabs button{flex:1 1 auto;padding:7px 9px;border:1px solid var(--sk-line-2);border-radius:9px;background:var(--sk-input);color:var(--sk-text-2);font-size:11.5px;font-weight:600;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.sdx__atabs button:hover{border-color:var(--sk-text-4);color:var(--sk-text)}
.sdx__atabs button.is-on{border-color:var(--sk-accent);color:var(--sk-accent-text);background:var(--sk-accent-soft)}
.sdx__abody{min-height:80px}
.sdx__abody .sdx__f{margin:10px 0}
.sdx__ad input[type=range]{-webkit-appearance:none;appearance:none;height:6px;border-radius:4px;background:var(--tr,var(--sk-line-2));outline:none}
.sdx__ad input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--sk-accent);cursor:pointer}
.sdx__ad input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--sk-accent);cursor:pointer}
.sdx__curve{display:block;width:100%;max-width:240px;aspect-ratio:1;margin:6px auto 10px;border-radius:10px;border:1px solid var(--sk-line-3);touch-action:none;cursor:crosshair}
.sdx__bands{display:flex;gap:7px;margin:2px 0 8px}
.sdx__bands button{width:26px;height:26px;border-radius:50%;border:2px solid transparent;background:transparent;padding:2px;cursor:pointer}
.sdx__bands button i{display:block;width:100%;height:100%;border-radius:50%;background:var(--c)}
.sdx__bands button.is-on{border-color:#fff}
.sdx__flts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sdx__flts button{display:grid;gap:4px;padding:0 0 6px;border:1px solid var(--sk-line-2);border-radius:10px;background:var(--sk-input);color:var(--sk-text-2);cursor:pointer;overflow:hidden;text-align:center}
.sdx__flts button canvas{width:100%;height:auto;aspect-ratio:84/64;display:block;background:var(--sk-line)}
.sdx__flts button small{font-size:10.5px;font-weight:600}
.sdx__flts button:hover{border-color:var(--sk-text-4)}.sdx__flts button.is-on{border-color:var(--sk-accent);color:var(--sk-text)}
.sdx__masks{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.sdx__masks button{display:grid;place-items:center;gap:3px;padding:7px 2px 5px;border:1px solid var(--sk-line-2);border-radius:10px;background:var(--sk-input);color:var(--sk-text-2);cursor:pointer}
.sdx__masks button img{width:34px;height:34px}
.sdx__masks button small{font-size:9.5px;font-weight:600;line-height:1.1;text-align:center}
.sdx__masks button:hover{border-color:var(--sk-text-4)}.sdx__masks button.is-on{border-color:var(--sk-accent);color:var(--sk-text)}
.sdx__frames{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:6px}
.sdx__frames button{display:grid;place-items:center;gap:5px;padding:9px 4px 6px;border:1px solid var(--sk-line-2);border-radius:10px;background:var(--sk-input);color:var(--sk-text-2);cursor:pointer}
.sdx__frames button small{font-size:10.5px;font-weight:600}
.sdx__frames button:hover{border-color:var(--sk-text-4)}.sdx__frames button.is-on{border-color:var(--sk-accent);color:var(--sk-text)}
.sdx__fr{display:block;width:44px;height:34px;border-radius:2px;background:linear-gradient(135deg,var(--sk-text-3),var(--sk-line-3));position:relative}
.sdx__fr--none{background:transparent;border:1px dashed var(--sk-text-4)}
.sdx__fr--thin{box-shadow:inset 0 0 0 1px #fff}
.sdx__fr--thick{box-shadow:inset 0 0 0 4px #fff}
.sdx__fr--double{box-shadow:inset 0 0 0 1px #fff,inset 0 0 0 4px transparent,inset 0 0 0 5px #fff}
.sdx__fr--mat{box-shadow:inset 0 0 0 5px #fff}
.sdx__fr--polaroid{box-shadow:inset 0 0 0 4px #fff,inset 0 -9px 0 0 #fff}
.sdx__fr--film{box-shadow:inset 7px 0 0 #111,inset -7px 0 0 #111}
.sdx__fr--gold{box-shadow:inset 0 0 0 3px #D9A93F,inset 0 0 0 5px #6b4a12}
.sdx__fr--corners{background:linear-gradient(#fff,#fff) 3px 3px/9px 2px no-repeat,linear-gradient(#fff,#fff) 3px 3px/2px 9px no-repeat,linear-gradient(#fff,#fff) right 3px top 3px/9px 2px no-repeat,linear-gradient(#fff,#fff) right 3px top 3px/2px 9px no-repeat,linear-gradient(#fff,#fff) 3px bottom 3px/9px 2px no-repeat,linear-gradient(#fff,#fff) 3px bottom 3px/2px 9px no-repeat,linear-gradient(#fff,#fff) right 3px bottom 3px/9px 2px no-repeat,linear-gradient(#fff,#fff) right 3px bottom 3px/2px 9px no-repeat,linear-gradient(135deg,var(--sk-text-3),var(--sk-line-3))}
.sdx__fr--inset{box-shadow:inset 0 0 0 4px transparent,inset 0 0 0 5px #fff}
.sdx__col input[type=color]{width:100%;height:34px;padding:2px;border:1px solid var(--sk-line-3);border-radius:8px;background:var(--sk-input);cursor:pointer}

/* the Layers panel: group and order buttons, and a mark on grouped rows */
.sdx__lyact{display:flex;align-items:center;gap:4px;padding:8px 10px;border-bottom:1px solid var(--sk-line)}
.sdx__lyact i{width:1px;height:18px;background:var(--sk-line-2);margin:0 4px}
.sdx__lyact .sdx__chip{height:30px;padding:0 8px}
.sdx__lyi.is-grouped{box-shadow:inset 3px 0 0 var(--sk-accent)}

/* Smart select (studio-sam.js) */
body.sds-open{overflow:hidden}
.sds{position:fixed;inset:0;z-index:1300;display:grid;background:rgba(8,8,12,.62);opacity:0;transition:opacity .2s ease-out;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sds.is-in{opacity:1}
.sds__win{position:relative;margin:14px;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;min-height:0;border-radius:14px;overflow:hidden;background:var(--sk-bg);border:1px solid var(--sk-line-2);box-shadow:0 30px 80px rgb(var(--sk-sh) / var(--sk-sha-hi));transform:translateY(8px) scale(.992);transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.sds.is-in .sds__win{transform:none}
.sds__top{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--sk-line);color:var(--sk-text)}
.sds__top b{font-size:14px;font-weight:600;letter-spacing:-.01em}
.sds__sp{flex:1}
.sds__chip{font-size:11.5px;font-weight:500;padding:3px 10px;border-radius:99px;background:var(--sk-fill);color:var(--sk-text-2)}
.sds__chip[data-s=ok]{background:rgba(48,209,88,.16);color:#5de08a}.sds__chip[data-s=err]{background:rgba(255,69,58,.18);color:#ff7a70}.sds__chip[data-s=load]{background:rgba(10,132,255,.16);color:#6cb4ff}
.sds__btn{height:30px;padding:0 14px;border:1px solid var(--sk-line-3);border-radius:8px;background:var(--sk-raised);color:var(--sk-text);font:inherit;font-size:13px;font-weight:500;cursor:pointer;transition:background .14s,border-color .14s}
.sds__btn:hover{background:var(--sk-fill-2)}.sds__btn--hi{background:#0a84ff;border-color:#0a84ff;color:var(--sk-text)}.sds__btn--hi:hover{background:#2b95ff}
.sds__bar{display:flex;align-items:center;gap:6px;padding:8px 12px;border-bottom:1px solid var(--sk-line);overflow-x:auto;scrollbar-width:none;background:var(--sk-surface)}
.sds__bar::-webkit-scrollbar{display:none}
.sds__v{width:1px;height:20px;background:var(--sk-line-2);margin:0 4px;flex:none}
.sds__seg{display:inline-flex;padding:2px;border-radius:9px;background:var(--sk-fill);flex:none;gap:2px}
.sds__seg button,.sds__tb{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:0;border-radius:7px;background:transparent;color:var(--sk-text-2);font:inherit;font-size:12.5px;font-weight:500;cursor:pointer;flex:none;transition:background .13s,color .13s}
.sds__seg button svg,.sds__tb svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sds__seg button em,.sds__tb em{font-style:normal}
.sds__seg button:hover,.sds__tb:hover:not(:disabled){background:var(--sk-fill-2);color:var(--sk-text)}
.sds__seg button.is-on{background:var(--sk-fill-3);color:var(--sk-text);box-shadow:0 1px 2px rgb(var(--sk-sh) / var(--sk-sha-md))}
.sds__tb{border:1px solid transparent}.sds__tb:disabled{opacity:.38;cursor:default}
.sds__tb[data-do=layer],.sds__tb[data-do=cutbg]{background:#0a84ff;color:var(--sk-text)}.sds__tb[data-do=layer]:hover:not(:disabled),.sds__tb[data-do=cutbg]:hover:not(:disabled){background:#2b95ff}.sds__tb[data-do=cutbg]{background:var(--sk-fill);border-color:var(--sk-line-3)}
.sds__view{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 4px 0 10px;border-radius:8px;background:var(--sk-fill);color:var(--sk-text-2);flex:none}
.sds__view svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.sds__view select{height:28px;border:0;background:transparent;color:inherit;font:inherit;font-size:12.5px;padding:0 6px;cursor:pointer;outline:0}
.sds__view select option{background:var(--sk-fill);color:var(--sk-text)}
.sds__stage{position:relative;min-height:0;background:var(--sk-bg);overflow:hidden}
.sds__stage canvas{position:absolute;inset:0;touch-action:none}
#sdsOv{cursor:crosshair}
.sds__busy{position:absolute;left:50%;top:18px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:9px 16px;border-radius:99px;background:var(--sk-glass);color:var(--sk-text);font-size:13px;box-shadow:0 8px 24px rgb(var(--sk-sh) / var(--sk-sha-md));pointer-events:none}
.sds__busy i{width:14px;height:14px;border-radius:50%;border:2px solid var(--sk-line-3);border-top-color:var(--sk-accent);animation:sdsSpin .8s linear infinite}
@keyframes sdsSpin{to{transform:rotate(360deg)}}
.sds__err{position:absolute;inset:0;display:grid;place-content:center;gap:10px;text-align:center;color:var(--sk-text);font-size:14px;padding:30px}
.sds__err small{display:block;color:#98989f;max-width:520px;word-break:break-word}
.sds__foot{display:flex;align-items:center;gap:12px;padding:8px 14px;border-top:1px solid var(--sk-line);font-size:12.5px;color:#a0a0ab;min-height:34px}
.sds__foot .is-bad{color:#ff8077}
.sds__panel{position:absolute;right:14px;top:96px;width:300px;max-height:calc(100% - 150px);overflow:auto;padding:14px;border-radius:14px;background:var(--sk-glass);border:1px solid var(--sk-line-2);box-shadow:0 18px 50px rgb(var(--sk-sh) / var(--sk-sha-hi));color:var(--sk-text);animation:sdsPop .18s ease-out both;scrollbar-width:thin}
@keyframes sdsPop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.sds__ph{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.sds__ph b{font-size:13.5px}
.sds__ph button{width:26px;height:26px;border:0;border-radius:50%;background:var(--sk-fill-2);color:var(--sk-text-2);cursor:pointer;padding:0}
.sds__ph svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.sds__panel h5{margin:14px 0 6px;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--sk-text-3);font-weight:600}
.sds__row{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;margin:8px 0}
.sds__row label{display:flex;justify-content:space-between;font-size:12.5px;color:var(--sk-text-2);grid-column:1/-1}
.sds__row label em{font-style:normal;color:#9a9aa6;font-variant-numeric:tabular-nums}
.sds__row input[type=range]{width:100%;accent-color:#0a84ff}
.sds__row button{height:26px;padding:0 11px;border:1px solid var(--sk-line-3);border-radius:7px;background:var(--sk-fill);color:var(--sk-text);font:inherit;font-size:12px;cursor:pointer}.sds__row button:hover{background:var(--sk-fill-2)}
.sds__chk{display:flex;gap:8px;align-items:center;margin-top:10px;font-size:12.5px;color:var(--sk-text-2)}.sds__chk input{accent-color:#0a84ff}
.sds__note{margin:12px 0 0;font-size:11.5px;line-height:1.5;color:var(--sk-text-3)}
@media (max-width:760px){.sds__win{margin:0;border-radius:0}.sds__panel{left:10px;right:10px;width:auto;top:auto;bottom:46px;max-height:46vh}.sds__top{flex-wrap:wrap}}
@media (prefers-reduced-motion:reduce){.sds,.sds__win{transition:none}.sds__panel{animation:none}}

/* ===== Apple-style interface layer (tokens above). Geometry, type, materials, motion. Artwork colours are never touched. ===== */
.sdx,.sdc,.sds,.sk-pal,.sk-tip{font-family:var(--sk-font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.sdx{font-size:13px;letter-spacing:-.01em;background:var(--sk-bg);color:var(--sk-text)}
.sdx h4,.sdx__sec{font-family:var(--sk-font)}
html.sk-fade .sdx,html.sk-fade .sdx *,html.sk-fade .sdc,html.sk-fade .sdc *,html.sk-fade .sds,html.sk-fade .sds *,html.sk-fade .sk-pal,html.sk-fade .sk-pal *{transition:background-color .3s var(--sk-ease),border-color .3s var(--sk-ease),color .3s var(--sk-ease),fill .3s var(--sk-ease),box-shadow .3s var(--sk-ease)!important}

/* focus: one visible ring everywhere, keyboard only */
.sdx :focus-visible,.sdc :focus-visible,.sds :focus-visible,.sk-pal :focus-visible{outline:2px solid var(--sk-focus);outline-offset:1px;border-radius:var(--sk-r-ctl)}
.sdx input:focus-visible,.sdx select:focus-visible{outline-offset:0}
.sdx button:active:not(:disabled),.sds button:active:not(:disabled),.sdc button:active:not(:disabled){transform:scale(.97);transition-duration:var(--sk-t-press)}
.sdx__rail button:active:not(:disabled){transform:scale(.96)}

/* top bar: a thin glass bar with one hairline under it */
.sdx__top{height:48px;gap:4px;background:var(--sk-glass);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:none;border-bottom:1px solid var(--sk-glass-line)}
.sdx__tbtn,.sdx__tb,.sdx__tp,.sdx__bot button{border-radius:var(--sk-r-ctl);transition:background-color var(--sk-t-hover) var(--sk-ease),color var(--sk-t-hover) var(--sk-ease),transform var(--sk-t-press) var(--sk-ease)}
.sdx__tbtn{height:32px;font-weight:500;color:var(--sk-text)}
.sdx__tbtn:hover{background:var(--sk-fill-2)}
.sdx__back{background:transparent;color:var(--sk-text-2)}.sdx__back:hover{background:var(--sk-fill-2);color:var(--sk-text)}
.sdx__name{border-radius:var(--sk-r-ctl);font-weight:600;color:var(--sk-text)}.sdx__name:hover{background:var(--sk-fill)}.sdx__name:focus{background:var(--sk-input);border-color:var(--sk-accent);box-shadow:0 0 0 3px var(--sk-accent-soft)}
.sdx__save{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;color:var(--sk-text-3);font-size:12px;font-weight:400}
.sdx__save::before{content:"";width:6px;height:6px;border-radius:50%;background:#30d158;flex:none;transition:background-color .2s}
.sdx__save:empty::before{display:none}
.sdx__dim{color:var(--sk-text-3);font-variant-numeric:tabular-nums}
.sdx__dlb{height:32px;border-radius:var(--sk-r-ctl);background:var(--sk-accent);color:var(--sk-on-accent);font-weight:600;box-shadow:none;transition:filter var(--sk-t-hover),transform var(--sk-t-press)}
.sdx__dlb:hover{transform:none;filter:brightness(1.06);box-shadow:none}
.sdx__tbtn--t{font-weight:500}
.sdx__brand img{filter:none}

/* search button and appearance switch in the bar */
.sk-find{gap:8px;padding:0 8px 0 10px;color:var(--sk-text-3);background:var(--sk-fill);border:1px solid var(--sk-line);min-width:168px;justify-content:flex-start;font-weight:400;margin-left:4px}
.sk-find:hover{background:var(--sk-fill-2);color:var(--sk-text)}
.sk-find svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sk-find span{flex:1;text-align:left}
kbd{font:inherit;font-family:var(--sk-font)}
.sk-find kbd,.sk-pal kbd{font-size:11px;line-height:1;padding:3px 6px;border-radius:5px;background:var(--sk-fill-2);color:var(--sk-text-3);border:1px solid var(--sk-line)}
.sk-seg{position:relative;display:inline-flex;gap:0;padding:2px;border-radius:9px;background:var(--sk-fill);border:1px solid var(--sk-line);flex:none}
.sk-seg button{position:relative;z-index:1;display:grid;place-items:center;width:28px;height:24px;border:0;border-radius:7px;background:transparent;color:var(--sk-text-3);cursor:pointer;padding:0;transition:color var(--sk-t-hover)}
.sk-seg button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.sk-seg button:hover{color:var(--sk-text)}.sk-seg button.is-on{color:var(--sk-text)}
.sk-theme{margin:0 6px}
.has-thumb{position:relative}
.sk-seg.has-thumb::before,.sdx__seg.has-thumb::before,.sds__seg.has-thumb::before,.sdc__seg.has-thumb::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:var(--sk-tw,0);transform:translateX(var(--sk-tx,0));border-radius:7px;background:var(--sk-surface);box-shadow:0 1px 3px rgb(var(--sk-sh) / var(--sk-sha-md)),0 0 0 .5px rgb(var(--sk-ov) / .1);transition:transform var(--sk-t-pop) var(--sk-ease-out),width var(--sk-t-pop) var(--sk-ease-out);pointer-events:none}
:root[data-sk="dark"] .sk-seg.has-thumb::before,:root:not([data-sk="light"]) .sk-seg.has-thumb::before{background:var(--sk-fill-3)}
.sdx__seg.has-thumb button.is-on,.sds__seg.has-thumb button.is-on,.sdc__seg.has-thumb button.is-on{background:transparent!important;box-shadow:none!important}
.sdx__seg.has-thumb button,.sds__seg.has-thumb button,.sdc__seg.has-thumb button{position:relative;z-index:1}
.sdx__seg.has-thumb{padding:0}.sdx__seg.has-thumb::before{top:0;bottom:0;border-radius:0}

/* tools list (rail), side panel, layers: calm surfaces, hairlines */
.sdx__rail{background:var(--sk-bg);border-right:1px solid var(--sk-line);padding:8px 6px}
.sdx__rail button{height:58px;border-radius:var(--sk-r-card);color:var(--sk-text-3);font-weight:500;font-size:10.5px;letter-spacing:0;transition:background-color var(--sk-t-hover) var(--sk-ease),color var(--sk-t-hover) var(--sk-ease),transform var(--sk-t-press)}
.sdx__rail button:not(.is-on):hover{background:var(--sk-fill);color:var(--sk-text)}
.sdx__rail button.is-on{background:var(--sk-accent-soft);color:var(--sk-accent-text);font-weight:600}
.sdx__panel{background:var(--sk-surface);border-right:1px solid var(--sk-line);transition:width var(--sk-t-side) var(--sk-ease-out),opacity var(--sk-t-hover)}
.sdx__pb{scrollbar-color:var(--sk-line-3) transparent}
.sdx__pb h4,.sdx__sec,.sdx__fl h6,.sdx__sect{font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--sk-text-3)}
.sdx__ly{background:var(--sk-surface);border-left-color:var(--sk-line)!important;transition:width var(--sk-t-side) var(--sk-ease-out)}
.sdx__lyh{border-bottom-color:var(--sk-line)}
.sdx__lyi{border-radius:var(--sk-r-ctl)}.sdx__lyi:hover{background:var(--sk-fill)}.sdx__lyi.is-on{background:var(--sk-accent-soft);border-color:transparent;box-shadow:inset 0 0 0 1px var(--sk-accent)}
.sdx__shut,.sdx__open{background:var(--sk-fill);color:var(--sk-text-3)}.sdx__shut:hover,.sdx__open:hover{background:var(--sk-fill-2);color:var(--sk-text)}

/* the floating tool bar and the pop-overs are glass; with reduced transparency they are solid */
.sdx__tool{margin:12px 16px 0;border-radius:var(--sk-r-card);background:var(--sk-glass);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border:1px solid var(--sk-glass-line);box-shadow:0 4px 18px rgb(var(--sk-sh) / var(--sk-sha-md))}
.sdx__tb.is-on,.sdx__tp.is-on{background:var(--sk-accent-soft);color:var(--sk-accent-text)}
.sdx__tb:hover,.sdx__tp:hover{background:var(--sk-fill-2)}
.sdx__sep{background:var(--sk-line-2)}
.sdx__pop,.sdx__ctx,.sdx__subm,.sdx__dlm,.sdx__mini{border-radius:var(--sk-r-pop);background:var(--sk-glass);-webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px);border:1px solid var(--sk-glass-line);box-shadow:0 18px 50px rgb(var(--sk-sh) / var(--sk-sha-hi)),0 2px 8px rgb(var(--sk-sh) / var(--sk-sha-md))}
.sdx__ctx>button:hover:not(:disabled),.sdx__subb:hover,.sdx__sub:hover>.sdx__subb,.sdx__subm button:hover,.sdx__menu button:hover,.sdx__dlm button:hover,.sdx__sizes button:hover,.sdx__fl button:hover{background:var(--sk-accent-soft)}
.sdx__ctx>button,.sdx__subb,.sdx__subm button,.sdx__menu button,.sdx__dlm button{border-radius:var(--sk-r-ctl)}
.sdx__ctx em,.sdx__menu em,.sdx__dlm small,.sdx__sizes small{color:var(--sk-text-3)}
.sdx__ctx hr,.sdx__menu hr{background:var(--sk-line)}
/* controls inside panels */
.sdx__tpl,.sdx__els button,.sdx__tx button,.sdx__ups button,.sdx__logos button,.sdx__et,.sdx__qt button,.sdx__tl button{border-radius:var(--sk-r-card)}
.sdx__els button,.sdx__tx button,.sdx__tl button,.sdx__chip,.sdx__n input,.sdx__f select,.sdx__inp,.sdx__search{border-color:var(--sk-line-2)}
.sdx__els button:hover,.sdx__tx button:hover,.sdx__ups button:hover,.sdx__logos button:hover,.sdx__chip:hover{border-color:var(--sk-accent)}
.sdx__search{border-radius:var(--sk-r-ctl);background:var(--sk-input);height:34px}.sdx__search:focus-within{border-color:var(--sk-accent);box-shadow:0 0 0 3px var(--sk-accent-soft)}
.sdx__n input,.sdx__f select,.sdx__inp{border-radius:var(--sk-r-ctl);background:var(--sk-input);color:var(--sk-text)}
.sdx__n input:focus,.sdx__f select:focus,.sdx__inp:focus{border-color:var(--sk-accent);box-shadow:0 0 0 3px var(--sk-accent-soft);outline:0}
.sdx__btn,.sdx__go,.sdc__go{border-radius:var(--sk-r-ctl);box-shadow:none;background:var(--sk-accent);color:var(--sk-on-accent)!important;transition:filter var(--sk-t-hover),transform var(--sk-t-press)}
.sdx__btn:hover{filter:brightness(1.06)}
.sdx__chips button,.sdx__pill{border-radius:var(--sk-r-pill)}
.sdx__chips button.is-on,.sdx__pill.is-on{background:var(--sk-accent);border-color:var(--sk-accent)}
.sdx__tp--hi{background:var(--sk-accent);color:var(--sk-on-accent)}.sdx__tp--hi:hover{background:var(--sk-accent-2);color:var(--sk-on-accent)}
.sdx__bot{height:40px}
.sdx__bot input[type=range],.sdx__f input[type=range]{accent-color:var(--sk-accent)}
.sdx__stagewrap{background:var(--sk-canvas) radial-gradient(circle,var(--sk-dot) 1px,transparent 1px) 0 0/24px 24px}
.sdx__work{background:var(--sk-canvas)}
.sdx__stage{box-shadow:0 8px 40px rgb(var(--sk-sh) / var(--sk-sha-hi)),0 0 0 1px rgb(var(--sk-ov) / .08)}
.sdx__ang,.sdx__mchip{background:var(--sk-glass);border-color:var(--sk-glass-line);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:var(--sk-accent-text)}
.sdx__tth,.sdx__tpl .sdx__tth{box-shadow:0 2px 10px rgb(var(--sk-sh) / var(--sk-sha-md))}
.sdx__tpl:hover .sdx__tth{box-shadow:0 8px 22px rgb(var(--sk-sh) / var(--sk-sha-hi)),0 0 0 2px var(--sk-accent)}

/* Smart select window and photo cut-out follow the same tokens */
.sds{background:rgb(var(--sk-sh) / .45)}
.sds__win{background:var(--sk-surface);border-color:var(--sk-line-2);border-radius:var(--sk-r-pop)}
.sds__btn{border-radius:var(--sk-r-ctl);background:var(--sk-fill);border-color:var(--sk-line-2);color:var(--sk-text)}
.sds__btn:hover{background:var(--sk-fill-2)}
.sds__btn--hi{background:var(--sk-accent);border-color:var(--sk-accent);color:var(--sk-on-accent)}.sds__btn--hi:hover{background:var(--sk-accent-2)}
.sds__tb[data-do=layer],.sds__tb[data-do=cutbg]{background:var(--sk-accent);color:var(--sk-on-accent)}
.sds__tb[data-do=layer]:hover:not(:disabled),.sds__tb[data-do=cutbg]:hover:not(:disabled){background:var(--sk-accent-2)}
.sds__tb[data-do=cutbg]{background:var(--sk-fill);color:var(--sk-text);border-color:var(--sk-line-2)}
.sds__seg,.sds__view,.sdx__seg{background:var(--sk-fill)}
.sds__seg button.is-on{color:var(--sk-text)}
.sdc{background:var(--sk-bg)}.sdc__top,.sdc__bar,.sdc__foot{background:var(--sk-glass);border-color:var(--sk-glass-line);box-shadow:none}

/* sliders: a thin track filled from where it starts (from the middle when it goes both ways), a small white thumb */
.sdx input[type=range],.sds input[type=range],.sdc input[type=range]{-webkit-appearance:none;appearance:none;height:20px;background:transparent;margin:0;cursor:pointer;--a:0%;--b:50%}
.sdx input[type=range]::-webkit-slider-runnable-track,.sds input[type=range]::-webkit-slider-runnable-track,.sdc input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right,var(--sk-fill-3) var(--a),var(--sk-accent) var(--a),var(--sk-accent) var(--b),var(--sk-fill-3) var(--b))}
.sdx input[type=range]::-webkit-slider-thumb,.sds input[type=range]::-webkit-slider-thumb,.sdc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-6px;border-radius:50%;background:#fff;border:0;box-shadow:0 1px 4px rgb(0 0 0 / .35),0 0 0 .5px rgb(0 0 0 / .12);transition:transform var(--sk-t-hover) var(--sk-ease)}
.sdx input[type=range]:active::-webkit-slider-thumb,.sds input[type=range]:active::-webkit-slider-thumb,.sdc input[type=range]:active::-webkit-slider-thumb{transform:scale(1.12)}
.sdx input[type=range]::-moz-range-track,.sds input[type=range]::-moz-range-track,.sdc input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:linear-gradient(to right,var(--sk-fill-3) var(--a),var(--sk-accent) var(--a),var(--sk-accent) var(--b),var(--sk-fill-3) var(--b))}
.sdx input[type=range]::-moz-range-thumb,.sds input[type=range]::-moz-range-thumb,.sdc input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:0;box-shadow:0 1px 4px rgb(0 0 0 / .35)}
.sdx input[type=range]:focus-visible{outline:0}.sdx input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--sk-focus),0 1px 4px rgb(0 0 0 / .35)}

/* tooltip */
.sk-tip{position:fixed;z-index:3000;display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:7px;background:var(--sk-glass);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border:1px solid var(--sk-glass-line);color:var(--sk-text);font-size:12px;line-height:1.2;box-shadow:0 6px 20px rgb(var(--sk-sh) / var(--sk-sha-md));pointer-events:none;opacity:0;transform:translateY(-2px);transition:opacity var(--sk-t-tip) var(--sk-ease),transform var(--sk-t-tip) var(--sk-ease)}
.sk-tip[data-side=t]{transform:translateY(2px)}.sk-tip.is-in{opacity:1;transform:none}.sk-tip[hidden]{display:none}
.sk-keys{display:inline-flex;gap:3px}.sk-keys kbd{min-width:18px;text-align:center;font-size:11px;padding:2px 5px;border-radius:5px;background:var(--sk-fill-2);color:var(--sk-text-3);border:1px solid var(--sk-line)}

/* command search */
.sk-back{position:fixed;inset:0;z-index:2990;background:rgb(var(--sk-sh) / .32);opacity:0;transition:opacity var(--sk-t-modal) var(--sk-ease)}.sk-back.is-in{opacity:1}
.sk-pal{position:fixed;z-index:3000;left:50%;top:14vh;width:min(560px,calc(100vw - 32px));max-height:min(480px,70vh);display:grid;grid-template-rows:auto minmax(0,1fr);border-radius:16px;overflow:hidden;background:var(--sk-glass);-webkit-backdrop-filter:saturate(180%) blur(30px);backdrop-filter:saturate(180%) blur(30px);border:1px solid var(--sk-glass-line);box-shadow:0 30px 90px rgb(var(--sk-sh) / var(--sk-sha-hi));color:var(--sk-text);opacity:0;transform:translate(-50%,-8px) scale(.98);transition:opacity var(--sk-t-modal) var(--sk-ease-out),transform var(--sk-t-modal) var(--sk-ease-out)}
.sk-pal.is-in{opacity:1;transform:translate(-50%,0)}
.sk-pal__q{display:flex;align-items:center;gap:10px;padding:0 14px;height:52px;border-bottom:1px solid var(--sk-line)}
.sk-pal__q svg{width:18px;height:18px;fill:none;stroke:var(--sk-text-3);stroke-width:2;stroke-linecap:round;flex:none}
.sk-pal__q input{flex:1;min-width:0;height:100%;border:0;background:transparent;color:var(--sk-text);font:inherit;font-size:16px;outline:0}
.sk-pal__q input::placeholder{color:var(--sk-text-4)}
.sk-pal__l{overflow:auto;padding:6px;scrollbar-width:thin;scrollbar-color:var(--sk-line-3) transparent}
.sk-pal__g{padding:10px 10px 4px;font-size:11px;font-weight:600;color:var(--sk-text-3)}
.sk-pal__i{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 10px;border-radius:var(--sk-r-ctl);font-size:13.5px;cursor:pointer}
.sk-pal__i.is-on{background:var(--sk-accent-soft);color:var(--sk-text)}
.sk-pal__e{padding:28px 12px;text-align:center;color:var(--sk-text-3);font-size:13px}

/* tablet and phone */
@media (max-width:900px){.sk-find span,.sk-find kbd{display:none}.sk-find{min-width:34px;padding:0 8px;justify-content:center;margin-left:0}.sk-theme{margin:0 2px}}
@media (max-width:600px){.sk-theme{display:none}}

/* reduced motion and reduced transparency */
@media (prefers-reduced-motion:reduce){
  .sdx *,.sds *,.sdc *,.sk-pal,.sk-back,.sk-tip{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-delay:0s!important}
}
@media (prefers-reduced-transparency:reduce){
  .sdx__top,.sdx__tool,.sdx__pop,.sdx__ctx,.sdx__subm,.sdx__dlm,.sdx__mini,.sk-tip,.sk-pal,.sdx__ang,.sdx__mchip{-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* home: the same geometry and motion as the editor, inside the portal's own colours */
.sd--home :focus-visible{outline:2px solid rgba(0,125,250,.6);outline-offset:2px;border-radius:var(--sk-r-ctl)}
.sdh__hero{border-radius:20px}
.sdh__search{border-radius:var(--sk-r-card);transition:border-color var(--sk-t-hover) var(--sk-ease),background-color var(--sk-t-hover) var(--sk-ease)}
.sdh__cta{border-radius:var(--sk-r-card);transition:transform var(--sk-t-hover) var(--sk-ease),box-shadow var(--sk-t-hover) var(--sk-ease),filter var(--sk-t-hover)}
.sdh__cta:active,.sdh__size:active,.sd--home .sd__card:active{transform:scale(.98)}
.sdh__size{border-radius:var(--sk-r-card);transition:background-color var(--sk-t-hover) var(--sk-ease),border-color var(--sk-t-hover) var(--sk-ease),transform var(--sk-t-hover) var(--sk-ease),box-shadow var(--sk-t-hover) var(--sk-ease)}
.sd--home .sd__cth{border-radius:var(--sk-r-card);transition:transform .18s var(--sk-ease-out),box-shadow .18s var(--sk-ease-out)}
.sd__chips button{transition:background-color var(--sk-t-hover) var(--sk-ease),color var(--sk-t-hover) var(--sk-ease),border-color var(--sk-t-hover) var(--sk-ease)}
.sd__menu{border-radius:var(--sk-r-pop);transform-origin:top right;animation:sdxPop var(--sk-t-pop) var(--sk-ease-out) both}
@media (prefers-reduced-motion:reduce){.sd *{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* the home already shows the Studio logo: no second title above it */
body:has(#studio:not([hidden]):not(.hidden)) #catTitle,body:has(#studio:not([hidden]):not(.hidden)) #catSub{display:none}
/* the custom-size boxes stay light with dark numbers, whatever the system theme */
.sdh__cw input{background:#fff;color:var(--ink,#2a1d0a);border:1px solid var(--edge,#e6dcc8);-webkit-text-fill-color:var(--ink,#2a1d0a);color-scheme:light}
.sdh__cw input::placeholder{color:var(--ink-3,#8a7b62);-webkit-text-fill-color:var(--ink-3,#8a7b62)}
.sdh__cw input:focus{outline:0;border-color:var(--sk-accent);box-shadow:0 0 0 3px rgba(228,174,82,.25)}
.sdx__dlm hr{border:0;height:1px;margin:4px 6px;background:var(--sk-line)}

/* a clipped object in the Layers panel sits a step in, with a small corner mark, under the one that masks it */
.sdx__lyi.is-clipped{margin-left:14px;position:relative}
.sdx__lyi.is-clipped::before{content:"";position:absolute;left:-10px;top:-4px;width:8px;height:20px;border-left:1.5px solid var(--sk-line-3);border-bottom:1.5px solid var(--sk-line-3);border-radius:0 0 0 5px;pointer-events:none}

/* light theme touches: effect samples are dark cards in both themes, so their words stay light; element tiles sit on a soft fill */
.sdx__fxg button{color:#bdbdcd}.sdx__fxg button.is-on{color:#F2C46B}
.sdx__et{background:var(--sk-fill)}.sdx__et:hover{background:var(--sk-fill-2)}

/* the tool palette's pastel icons are darker on a light panel */
:root[data-sk="light"] .sdx__pt--eraser{color:#C0508F}:root[data-sk="light"] .sdx__pt--note{color:#B8860B}
@media (prefers-color-scheme:light){:root[data-sk="system"] .sdx__pt--eraser{color:#C0508F}:root[data-sk="system"] .sdx__pt--note{color:#B8860B}}

/* a photograph being dragged over the page from the Uploads panel */
.sdx__stage.is-drop{outline:2px dashed var(--sk-accent,#E4AE52);outline-offset:-3px;background-color:rgb(228 174 82 / .06)}
.sdx__up[draggable=true],.sdx__ups [data-up]{cursor:grab}

/* the home's second button: Open PSD */
.sdh__cta--ghost{background:rgb(255 255 255 / .14)!important;color:inherit!important;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .28)!important}
.sdh__cta--ghost:hover{background:rgb(255 255 255 / .24)!important}

/* ================= keyboard shortcuts window (studio-keys.js) ================= */
.sdx__kb{position:fixed;inset:0;z-index:1250;display:grid;place-items:center;padding:18px;font-family:inherit;color:var(--sk-text,#f2f2f4)}
.kb__scrim{position:absolute;inset:0;background:rgb(0 0 0 / .55);backdrop-filter:blur(4px)}
.kb__box{position:relative;width:min(1180px,100%);max-height:94vh;overflow:auto;border-radius:22px;padding:22px 24px 26px;background:var(--sk-surface,#1d1d1f);border:1px solid var(--sk-line-3,rgb(255 255 255 / .1));box-shadow:0 40px 100px rgb(0 0 0 / .55);overscroll-behavior:contain}
.kb__h{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:16px}
.kb__h h2{margin:0 0 4px;font-size:20px;font-weight:700}
.kb__h p{margin:0;font-size:13px;line-height:1.5;color:var(--sk-text-3,#9b9ba3);max-width:720px}
.kb__h p b{color:var(--sk-text,#f2f2f4)}
.kb__hb{display:flex;gap:8px;flex:none}
.kb__hb button{height:34px;padding:0 14px;border-radius:10px;border:1px solid var(--sk-line-3,rgb(255 255 255 / .12));background:var(--sk-raised,#232326);color:inherit;font:inherit;font-size:12.5px;cursor:pointer}
.kb__hb button:hover{border-color:var(--sk-accent,#e4ae52)}
.kb__hb .kb__x{width:34px;padding:0;font-size:20px;line-height:1}
.kb__board{--u:clamp(24px,calc((min(1180px,100vw) - 120px) / 17.2),56px);display:grid;gap:calc(var(--u) * .12);padding:16px;border-radius:18px;background:var(--sk-input,#121213);border:1px solid var(--sk-line-3,rgb(255 255 255 / .08));overflow-x:auto}
.kb__row{display:flex;gap:calc(var(--u) * .12);justify-content:center}
.kb__k{flex:none;width:calc(var(--u) * var(--w) + (var(--w) - 1) * var(--u) * .12);height:calc(var(--u) * 1.02);border-radius:calc(var(--u) * .2);border:1px solid var(--sk-line-3,rgb(255 255 255 / .1));background:var(--sk-raised,#232326);color:var(--sk-text-2,#cfcfd6);display:grid;place-items:center;align-content:center;gap:1px;padding:0 2px;font:inherit;cursor:pointer;position:relative;transition:background .15s,border-color .15s,transform .12s,box-shadow .15s}
.kb__k b{font-size:calc(var(--u) * .3);font-weight:600;line-height:1}
.kb__k small{font-size:calc(var(--u) * .19);line-height:1.05;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.9}
.kb__k:hover{border-color:var(--sk-accent,#e4ae52);transform:translateY(-1px)}
.kb__k:active{transform:translateY(1px)}
.kb__k.is-fixed{background:repeating-linear-gradient(135deg,var(--sk-raised,#232326) 0 6px,rgb(255 255 255 / .03) 6px 12px);color:var(--sk-text-3,#9b9ba3)}
.kb__k.has-other::after{content:"";position:absolute;right:calc(var(--u) * .13);top:calc(var(--u) * .13);width:calc(var(--u) * .13);height:calc(var(--u) * .13);border-radius:50%;background:var(--sk-accent,#e4ae52);opacity:.75}
.kb__k.is-bound{background:linear-gradient(180deg,var(--sk-accent-2,#f2c46b),var(--sk-accent,#e4ae52));border-color:var(--sk-accent-3,#c98a2b);color:var(--sk-on-accent,#241706);box-shadow:0 6px 16px rgb(228 174 82 / .25)}
.kb__k.is-pick{outline:2px solid #fff;outline-offset:2px;animation:kbPulse 1.1s ease-in-out infinite}
@keyframes kbPulse{50%{box-shadow:0 0 0 6px rgb(228 174 82 / .3)}}
.kb__k--mod{background:var(--sk-surface,#1d1d1f);color:var(--sk-text-3,#9b9ba3)}
.kb__k--mod:disabled{opacity:.55;cursor:default}
.kb__k--mod.is-held{background:var(--sk-accent-soft,rgb(228 174 82 / .16));border-color:var(--sk-accent,#e4ae52);color:var(--sk-accent-text,#f2c46b);box-shadow:inset 0 0 0 1px var(--sk-accent,#e4ae52)}
.kb__bar{display:flex;gap:14px;align-items:center;justify-content:space-between;margin:14px 0 6px;flex-wrap:wrap}
.kb__hint{font-size:12.5px;color:var(--sk-text-3,#9b9ba3);flex:1 1 320px;min-height:18px}
.kb__hint b{color:var(--sk-text,#f2f2f4)}
.kb__hint.is-bad{color:#ff8b7a}
.kb__s input{height:34px;width:230px;max-width:100%;padding:0 12px;border-radius:10px;border:1px solid var(--sk-line-3,rgb(255 255 255 / .12));background:var(--sk-input,#121213);color:inherit;font:inherit;font-size:13px;outline:none}
.kb__s input:focus{border-color:var(--sk-accent,#e4ae52)}
.kb__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:6px 26px;margin-top:10px}
.kb__g h3{margin:14px 0 6px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--sk-text-3,#9b9ba3)}
.kb__a{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:6px 8px;border-radius:10px;border:1px solid transparent;transition:background .15s,border-color .15s}
.kb__a:hover{background:rgb(255 255 255 / .04)}
.kb__a.is-pick{border-color:var(--sk-accent,#e4ae52);background:var(--sk-accent-soft,rgb(228 174 82 / .16))}
.kb__a.is-flash{animation:kbFlash 1.2s ease}
@keyframes kbFlash{0%,60%{background:var(--sk-accent-soft,rgb(228 174 82 / .3))}}
.kb__n{font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kb__c{display:flex;gap:5px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.kb__c kbd{display:inline-flex;gap:3px}
.kb__c kbd i{font-style:normal;min-width:22px;height:22px;padding:0 6px;display:inline-grid;place-items:center;border-radius:6px;background:var(--sk-raised,#232326);border:1px solid var(--sk-line-3,rgb(255 255 255 / .12));font-size:11.5px;font-weight:600;color:var(--sk-text,#f2f2f4)}
.kb__a.is-changed .kb__c kbd i{border-color:var(--sk-accent,#e4ae52);color:var(--sk-accent-text,#f2c46b)}
.kb__c em{font-style:normal;font-size:12px;color:var(--sk-accent-text,#f2c46b)}
.kb__c .kb__none{color:var(--sk-text-3,#9b9ba3)}
.kb__or{font-size:10.5px;color:var(--sk-text-3,#9b9ba3)}
.kb__b{display:flex;gap:4px;justify-content:flex-end;min-width:64px}
.kb__b button{height:26px;padding:0 9px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--sk-text-3,#9b9ba3);font:inherit;font-size:11.5px;cursor:pointer;opacity:0;transition:opacity .15s,background .15s,color .15s}
.kb__a:hover .kb__b button,.kb__a.is-pick .kb__b button,.kb__b button:focus-visible{opacity:1}
.kb__b button:hover{background:var(--sk-raised,#232326);color:var(--sk-text,#f2f2f4);border-color:var(--sk-line-3,rgb(255 255 255 / .12))}
@media (hover:none){.kb__b button{opacity:1}}
@media (max-width:640px){.kb__box{padding:16px 14px 20px;border-radius:16px}.kb__list{grid-template-columns:1fr}.kb__h{flex-direction:column}}
@media (prefers-reduced-motion:reduce){.kb__k.is-pick{animation:none}}

/* the shortcuts window, made compact: a small card, the list scrolls inside it */
.sdx__kb{place-items:center;padding:12px}
.kb__box{width:min(700px,100%);max-height:min(560px,88vh);padding:14px 16px 16px;border-radius:18px;display:flex;flex-direction:column;overflow:hidden}
.kb__h{margin-bottom:10px;gap:10px}
.kb__h h2{font-size:15px;margin:0 0 2px}
.kb__h p{font-size:11.5px;line-height:1.4;max-width:520px}
.kb__hb button{height:28px;padding:0 10px;font-size:11.5px;border-radius:8px}
.kb__hb .kb__x{width:28px;font-size:17px}
.kb__board{--u:clamp(18px,calc((min(700px,100vw) - 88px) / 17.4),34px);padding:9px;border-radius:12px;flex:none;overflow:hidden}
.kb__k{border-radius:calc(var(--u) * .22)}
.kb__k b{font-size:calc(var(--u) * .38)}
.kb__k small{font-size:calc(var(--u) * .24);display:none}
.kb__k.is-bound small{display:block}
.kb__bar{margin:8px 0 4px;gap:8px}
.kb__hint{font-size:11.5px;flex:1 1 220px;min-height:16px;line-height:1.35}
.kb__s input{height:28px;width:170px;font-size:12px;border-radius:8px}
.kb__list{grid-template-columns:1fr;gap:0;margin-top:4px;overflow-y:auto;min-height:0;flex:1 1 auto;padding-right:4px;overscroll-behavior:contain}
.kb__g h3{margin:10px 0 4px;font-size:10px}
.kb__a{padding:3px 6px;gap:8px;border-radius:8px}
.kb__n{font-size:12px}
.kb__c kbd i{min-width:19px;height:19px;font-size:10.5px;padding:0 4px;border-radius:5px}
.kb__b{min-width:0}
.kb__b button{height:22px;padding:0 7px;font-size:10.5px;border-radius:6px}
@media (max-width:640px){.kb__box{max-height:92vh}.kb__list{grid-template-columns:1fr}}

/* ---- layers panel: effects listed under a layer (like Photoshop), and adjustment layers ---- */
.sdx__lyg{display:block}
.sdx__fxc{flex:none;width:16px;height:22px;display:grid;place-items:center;padding:0;border:0;background:none;color:var(--sk-text-3,#9b9ba3);cursor:pointer}
.sdx__fxc svg{width:10px;height:10px;transition:transform .18s;transform:rotate(-90deg)}
.sdx__fxc.is-open svg{transform:rotate(0)}
.sdx__fxs{margin:0 0 4px 38px;padding:2px 0 2px 8px;border-left:1px solid var(--sk-line-3,rgb(255 255 255 / .1))}
.sdx__fxh{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--sk-text-3,#9b9ba3);padding:3px 4px}
.sdx__fx{display:flex;align-items:center;gap:6px;min-height:24px;padding:0 4px;border-radius:7px;font-size:11.5px;color:var(--sk-text-2,#cfcfd6);cursor:pointer}
.sdx__fx:hover{background:rgb(255 255 255 / .05)}
.sdx__fx.is-off .sdx__fxn{opacity:.4;text-decoration:line-through}
.sdx__fxe{width:20px;display:grid;place-items:center}
.sdx__fxe button{width:20px;height:20px;padding:0;border:0;background:none;color:var(--sk-text-3,#9b9ba3);cursor:pointer;display:grid;place-items:center;border-radius:5px}
.sdx__fxe button:hover{color:var(--sk-text,#f2f2f4);background:rgb(255 255 255 / .08)}
.sdx__fx.is-off .sdx__fxe button{opacity:.35}
.sdx__fxe i{width:4px;height:4px;border-radius:50%;background:var(--sk-text-3,#9b9ba3);opacity:.5}
.sdx__fxe svg{width:13px;height:13px}
.sdx__lyi i u.a{display:block;width:18px;height:18px;border-radius:50%;border:2px solid var(--sk-accent,#e4ae52);background:linear-gradient(90deg,transparent 50%,var(--sk-accent,#e4ae52) 50%)}
.sdx__lyadd{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 9px;margin-left:auto;margin-right:6px;border-radius:8px;border:1px solid var(--sk-line-3,rgb(255 255 255 / .12));background:var(--sk-raised,#232326);color:inherit;font:inherit;font-size:11.5px;cursor:pointer}
.sdx__lyadd:hover{border-color:var(--sk-accent,#e4ae52)}
.sdx__lyadd svg{width:11px;height:11px}
.sdx__adjm{position:fixed;z-index:1400;width:220px;padding:6px;border-radius:12px;background:var(--sk-raised,#232326);border:1px solid var(--sk-line-3,rgb(255 255 255 / .12));box-shadow:0 16px 40px rgb(0 0 0 / .45);display:grid;gap:1px}
.sdx__adjm button{text-align:left;padding:8px 10px;border-radius:8px;border:0;background:none;color:var(--sk-text,#f2f2f4);font:inherit;font-size:12.5px;cursor:pointer}
.sdx__adjm button:hover{background:var(--sk-accent-soft,rgb(228 174 82 / .16));color:var(--sk-accent-text,#f2c46b)}
.sdx__crow{flex-wrap:wrap;gap:5px}

/* ---- artboards panel and windows (studio-boards.js) ---- */
.ab{display:grid;gap:12px;min-width:0}
.ab *{box-sizing:border-box}
.ab__h{display:flex;justify-content:space-between;align-items:baseline;padding:0 2px}
.ab__h b{font-size:15px;font-weight:700;letter-spacing:-.01em}.ab__h span{font-size:11.5px;color:var(--sk-text-3,#9b9ba3)}
.ab__list{display:grid;gap:2px}
.ab__i{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px 8px 6px 6px;border-radius:12px;border:1px solid transparent;position:relative;transition:background .15s}
.ab__i:hover{background:rgb(255 255 255 / .045)}
.ab__i.is-on{background:rgb(255 255 255 / .07)}
.ab__i.is-on::before{content:"";position:absolute;left:-5px;top:12px;bottom:12px;width:3px;border-radius:3px;background:var(--sk-accent,#e4ae52)}
.ab__t{position:relative;width:48px;height:48px;padding:0;border:0;border-radius:9px;background:var(--sk-input,#121213);display:grid;place-items:center;cursor:pointer;overflow:visible}
.ab__t canvas{max-width:42px;max-height:42px;display:block;border-radius:3px;box-shadow:0 1px 6px rgb(0 0 0 / .5)}
.ab__tick{position:absolute;left:-5px;top:-5px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:var(--sk-surface,#1d1d1f);border:1.5px solid var(--sk-line-3,rgb(255 255 255 / .28));color:transparent;opacity:0;transition:opacity .12s,background .12s,color .12s}
.ab__tick svg{width:11px;height:11px;stroke-width:3}
.ab__i:hover .ab__tick,.ab__i.is-ticked .ab__tick{opacity:1}
.ab__i.is-ticked .ab__tick{background:var(--sk-accent,#e4ae52);border-color:var(--sk-accent,#e4ae52);color:var(--sk-on-accent,#241706)}
.ab__m{min-width:0;display:grid;gap:0}
.ab__n{width:100%;border:0;background:transparent;color:inherit;font:inherit;font-size:13px;font-weight:600;padding:2px 4px;margin:0 -4px;border-radius:6px;outline:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.ab__n:not(:disabled):hover,.ab__n:focus{background:var(--sk-input,#121213)}.ab__n:disabled{opacity:1;-webkit-text-fill-color:currentColor}
.ab__m small{font-size:11px;color:var(--sk-text-3,#9b9ba3);padding:0 0 0 0}
.ab__a{display:flex;gap:0;opacity:0;transition:opacity .12s}.ab__i:hover .ab__a,.ab__i.is-on:hover .ab__a{opacity:1}
.ab__a button{width:26px;height:26px;display:grid;place-items:center;border:0;background:none;color:var(--sk-text-3,#9b9ba3);border-radius:7px;cursor:pointer}
.ab__a button:hover{background:rgb(255 255 255 / .1);color:var(--sk-text,#f2f2f4)}.ab__a svg{width:14px;height:14px}
.ab__p{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:40px;padding:0 14px;border:0;border-radius:11px;background:linear-gradient(180deg,var(--sk-accent-2,#f2c46b),var(--sk-accent,#e4ae52));color:var(--sk-on-accent,#241706);font:inherit;font-size:13px;font-weight:650;cursor:pointer;box-shadow:0 4px 14px rgb(228 174 82 / .22);transition:filter .15s,transform .1s}
.ab__p:hover{filter:brightness(1.06)}.ab__p:active{transform:translateY(1px)}
.ab__p svg{width:15px;height:15px;flex:none}.ab__p span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ab__p--s{height:36px;font-size:12.5px;box-shadow:none}
.ab__row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ab__g{display:flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 8px;border-radius:10px;border:1px solid var(--sk-line-3,rgb(255 255 255 / .12));background:transparent;color:var(--sk-text-2,#cfcfd6);font:inherit;font-size:12px;cursor:pointer;transition:background .15s,border-color .15s}
.ab__g:hover{background:rgb(255 255 255 / .06);border-color:rgb(255 255 255 / .22);color:var(--sk-text,#f2f2f4)}
.ab__g svg{width:14px;height:14px;flex:none}.ab__g span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ab__card{display:grid;gap:8px;padding:12px;border-radius:14px;background:rgb(255 255 255 / .035);border:1px solid var(--sk-line-3,rgb(255 255 255 / .07))}
.ab__lb{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--sk-text-3,#9b9ba3)}
.ab__send{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px}
.ab__send select{height:32px;min-width:0;border-radius:9px;border:1px solid var(--sk-line-3,rgb(255 255 255 / .12));background:var(--sk-input,#121213);color:inherit;font:inherit;font-size:12px;padding:0 8px}
.ab__send button{height:32px;padding:0 14px;border-radius:9px;border:1px solid var(--sk-line-3,rgb(255 255 255 / .12));background:var(--sk-raised,#232326);color:inherit;font:inherit;font-size:12px;cursor:pointer}
.ab__send button:hover{border-color:var(--sk-accent,#e4ae52)}
.ab__seg{display:flex;padding:2px;border-radius:9px;background:var(--sk-input,#121213)}
.ab__seg button{flex:1;height:26px;border:0;border-radius:7px;background:transparent;color:var(--sk-text-3,#9b9ba3);font:inherit;font-size:11.5px;font-weight:600;cursor:pointer;transition:background .15s,color .15s}
.ab__seg button:hover{color:var(--sk-text,#f2f2f4)}
.ab__seg button.is-on{background:var(--sk-raised,#2d2d31);color:var(--sk-text,#f2f2f4);box-shadow:0 1px 3px rgb(0 0 0 / .35)}
.ab__note{font-size:10.5px;line-height:1.45;color:var(--sk-text-3,#9b9ba3)}
.ab__box{width:min(640px,100%)!important}
.ab__fmts{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px;margin:6px 0 12px;max-height:290px;overflow:auto;padding-right:4px}
.ab__f{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;border:1px solid var(--sk-line-3,rgb(255 255 255 / .1));background:var(--sk-raised,#232326);cursor:pointer;font:inherit;color:inherit;text-align:left}
.ab__f:hover{border-color:var(--sk-accent,#e4ae52)}.ab__f input{accent-color:var(--sk-accent,#e4ae52)}
.ab__f span{display:grid;min-width:0;flex:1}.ab__f b{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ab__f small{font-size:10.5px;color:var(--sk-text-3,#9b9ba3)}
.ab__f button{border:0;background:none;color:var(--sk-text-3,#9b9ba3);cursor:pointer;font-size:15px}
.ab__f input:disabled+span{opacity:.4}
.ab__cust{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:12px;font-size:12px;color:var(--sk-text-3,#9b9ba3)}
.ab__cust input{height:30px;width:90px;border-radius:8px;border:1px solid var(--sk-line-3,rgb(255 255 255 / .12));background:var(--sk-input,#121213);color:inherit;font:inherit;font-size:12px;padding:0 8px}
.ab__cust input[type=text]{flex:1 1 140px;width:auto}
.ab__cust button{height:30px;padding:0 12px;border-radius:8px;border:1px solid var(--sk-line-3,rgb(255 255 255 / .12));background:var(--sk-raised,#232326);color:inherit;font:inherit;font-size:12px;cursor:pointer}
.ab__cust button:hover{border-color:var(--sk-accent,#e4ae52)}
.ab__opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.ab__opts label{display:grid;gap:4px;font-size:11.5px;color:var(--sk-text-3,#9b9ba3)}
.ab__opts select{height:32px;border-radius:8px;border:1px solid var(--sk-line-3,rgb(255 255 255 / .12));background:var(--sk-input,#121213);color:var(--sk-text,#f2f2f4);font:inherit;font-size:12px;padding:0 8px}
.ab__foot{display:flex;gap:12px;align-items:center;justify-content:space-between}.ab__foot span{font-size:12px;color:var(--sk-text-3,#9b9ba3)}
.ab__foot .sdx__btn{width:auto;padding:0 18px}
.ab__wide .kb__box{width:min(1100px,100%)}
.ab__strip{display:flex;gap:16px;overflow:auto;padding:6px 2px 10px;align-items:flex-end}
.ab__sv{flex:none;display:grid;gap:4px;justify-items:start;background:none;border:0;color:inherit;font:inherit;cursor:pointer;text-align:left}
.ab__sv canvas{display:block;border-radius:6px;box-shadow:0 6px 20px rgb(0 0 0 / .45);transition:transform .2s}.ab__sv:hover canvas{transform:translateY(-3px)}
.ab__sv b{font-size:12px}.ab__sv small{font-size:10.5px;color:var(--sk-text-3,#9b9ba3)}

/* ================= retouch window (studio-retouch.js) ================= */
.rtc{position:fixed;inset:0;z-index:1200;display:grid;grid-template-rows:auto minmax(0,1fr);background:var(--sk-bg,#161617);color:var(--sk-text,#f2f2f4);font-family:inherit;font-size:13px}
.rtc *{box-sizing:border-box}
.rtc__top{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--sk-line-3,rgb(255 255 255 / .1))}
.rtc__top b{font-size:14px;margin-left:6px}.rtc__sp{flex:1}
.rtc__b{height:30px;padding:0 12px;border-radius:9px;border:1px solid var(--sk-line-3,rgb(255 255 255 / .12));background:var(--sk-raised,#232326);color:inherit;font:inherit;font-size:12px;cursor:pointer}
.rtc__b:hover:not(:disabled){border-color:var(--sk-accent,#e4ae52)}.rtc__b:disabled{opacity:.4;cursor:default}
.rtc__ok{background:linear-gradient(180deg,var(--sk-accent-2,#f2c46b),var(--sk-accent,#e4ae52));color:var(--sk-on-accent,#241706);border:0;font-weight:650}
.rtc__body{display:grid;grid-template-columns:52px minmax(0,1fr);min-height:0}
.rtc__rail{display:flex;flex-direction:column;gap:4px;padding:8px 6px;border-right:1px solid var(--sk-line-3,rgb(255 255 255 / .1))}
.rtc__rail button{width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:10px;background:transparent;color:var(--sk-text-3,#9b9ba3);cursor:pointer}
.rtc__rail button:hover{background:rgb(255 255 255 / .07);color:var(--sk-text,#f2f2f4)}
.rtc__rail button.is-on{background:var(--sk-accent-soft,rgb(228 174 82 / .18));color:var(--sk-accent-text,#f2c46b)}
.rtc__rail svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rtc__main{display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-width:0;min-height:0}
.rtc__opts{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--sk-line-3,rgb(255 255 255 / .1));min-height:46px}
.rtc__g{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.rtc__f{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--sk-text-3,#9b9ba3)}
.rtc__f input{width:92px;accent-color:var(--sk-accent,#e4ae52)}.rtc__f em{font-style:normal;min-width:42px;color:var(--sk-text,#f2f2f4);font-variant-numeric:tabular-nums}
.rtc__c{height:28px;padding:0 11px;border-radius:8px;border:1px solid var(--sk-line-3,rgb(255 255 255 / .12));background:var(--sk-raised,#232326);color:inherit;font:inherit;font-size:12px;cursor:pointer}
.rtc__c:hover:not(:disabled){border-color:var(--sk-accent,#e4ae52)}.rtc__c:disabled{opacity:.4;cursor:default}
.rtc__c.is-on{background:var(--sk-accent-soft,rgb(228 174 82 / .18));border-color:var(--sk-accent,#e4ae52);color:var(--sk-accent-text,#f2c46b)}
.rtc__c--go{background:linear-gradient(180deg,var(--sk-accent-2,#f2c46b),var(--sk-accent,#e4ae52));color:var(--sk-on-accent,#241706);border:0;font-weight:650}
.rtc__s{font-size:11.5px;color:var(--sk-text-3,#9b9ba3)}
.rtc__stage{position:relative;min-height:0;overflow:hidden;touch-action:none;background:#101011}
.rtc__stage canvas{position:absolute;inset:0;display:block}
.rtc__stage.is-pan{cursor:grabbing!important}
.rtc__load{position:absolute;inset:0;display:grid;place-items:center;color:var(--sk-text-3,#9b9ba3)}
.rtc__hint{padding:7px 14px;border-top:1px solid var(--sk-line-3,rgb(255 255 255 / .1));font-size:11.5px;color:var(--sk-text-3,#9b9ba3);min-height:30px}
@media (max-width:700px){.rtc__body{grid-template-columns:44px minmax(0,1fr)}.rtc__rail button{width:34px;height:34px}.rtc__f input{width:70px}}