/* The Design Bench suite bar: one frame for the six design tools (S519b, frame A).
   Written into every tool page by scripts/add-design-suite.mjs; this file is the
   only copy of the bar's look. Per-tool layout offsets live in each page's
   TDC-SUITE-HEAD block, because each tool sizes its #app differently. */

@font-face{font-family:'DC Inter';font-style:normal;font-display:swap;font-weight:100 900;src:url(/fonts/inter-latin-wght-normal.f052ee44c3.woff2) format('woff2')}
@font-face{font-family:'DC Plex Mono';font-style:normal;font-display:swap;font-weight:400;src:url(/fonts/ibm-plex-mono-latin-400-normal.08949f728d.woff2) format('woff2')}
@font-face{font-family:'DC Plex Mono';font-style:normal;font-display:swap;font-weight:500;src:url(/fonts/ibm-plex-mono-latin-500-normal.01d2854474.woff2) format('woff2')}

:root{--ts-h:48px}   /* 52 until phase 3: four pixels of canvas back on every tool */

#tdc-suite{
  --ts-ground:#0c0c0d; --ts-raise:#151517; --ts-line:#26262a; --ts-ctl:#3a3a3f;
  --ts-ink:#ecebe8; --ts-dim:#9a978f; --ts-gold:#d3b06b;
  --ts-ui:'DC Inter','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ts-mono:'DC Plex Mono','IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  position:fixed;top:0;left:0;right:0;height:var(--ts-h);z-index:25;
  /* the page writes the bar hidden: it shows only once this stylesheet has loaded */
  display:flex!important;align-items:center;gap:18px;padding:0 14px;box-sizing:border-box;
  background:var(--ts-ground);border-bottom:1px solid var(--ts-line);
  color:var(--ts-ink);font:500 13px/1 var(--ts-ui);letter-spacing:0;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  -webkit-user-select:none;user-select:none;
}
#tdc-suite *,#tdc-suite *::before,#tdc-suite *::after{box-sizing:border-box}
#tdc-suite a,#tdc-suite button{font:inherit;color:inherit;text-decoration:none;background:none;border:0;margin:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
#tdc-suite svg{display:block;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
#tdc-suite :focus-visible{outline:2px solid var(--ts-gold);outline-offset:2px;border-radius:2px}

/* the house lockup, set like the site header: mark + mono caps */
#tdc-suite .ts-lock{display:flex;align-items:center;gap:8px;flex:none;font:400 11px/1 var(--ts-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ts-dim);white-space:nowrap}
#tdc-suite .ts-lock a{display:inline-flex;align-items:center;gap:9px;min-height:32px}
#tdc-suite .ts-lock a:hover{color:var(--ts-ink)}
#tdc-suite .ts-mark svg{width:22px;height:14px}
#tdc-suite .ts-mark svg circle{fill:currentColor;stroke:none}
#tdc-suite .ts-house{color:var(--ts-ink)}
#tdc-suite .ts-sep{opacity:.6}

/* the six tools, by name; gold marks only the one you are in */
#tdc-suite .ts-tabs{display:flex;align-items:stretch;height:100%;flex:none}
#tdc-suite .ts-tabs a{position:relative;display:flex;align-items:center;gap:7px;padding:0 9px;color:var(--ts-dim);white-space:nowrap}
#tdc-suite .ts-tabs a:hover{color:var(--ts-ink)}
#tdc-suite .ts-tabs a[aria-current="page"]{color:var(--ts-ink)}
#tdc-suite .ts-tabs a[aria-current="page"]::after{content:"";position:absolute;left:9px;right:9px;bottom:-1px;height:2px;background:var(--ts-gold)}
#tdc-suite .ts-tabs svg{width:16px;height:16px;display:none}

/* actions: search, undo, redo, copy link, copy image, export */
#tdc-suite .ts-act{margin-left:auto;display:flex;align-items:center;gap:5px;flex:none}
#tdc-suite .ts-search{display:flex;align-items:center;justify-content:space-between;gap:8px;width:112px;height:32px;padding:0 6px 0 9px;border:1px solid var(--ts-line);background:var(--ts-raise);color:var(--ts-dim);border-radius:3px}
#tdc-suite .ts-search:hover{border-color:var(--ts-ctl);color:var(--ts-ink)}
#tdc-suite .ts-search span{display:flex;align-items:center;gap:7px}
#tdc-suite .ts-search svg{width:15px;height:15px}
#tdc-suite kbd{font:400 10.5px/1 var(--ts-mono);border:1px solid var(--ts-line);border-radius:3px;padding:3px 5px;color:var(--ts-dim);background:none}
#tdc-suite .ts-ico{display:flex;align-items:center;justify-content:center;width:32px;height:32px;color:var(--ts-dim);border-radius:3px}
#tdc-suite .ts-ico:hover{color:var(--ts-ink);background:var(--ts-raise)}
#tdc-suite .ts-ico[aria-disabled="true"]{opacity:.35;pointer-events:none}
#tdc-suite .ts-ico svg{width:17px;height:17px}
#tdc-suite .ts-line{display:flex;align-items:center;gap:7px;height:32px;padding:0 12px;border:1px solid var(--ts-ctl);border-radius:3px;white-space:nowrap}
#tdc-suite .ts-line:hover{border-color:var(--ts-ink)}
#tdc-suite .ts-line svg{width:15px;height:15px;display:none}
#tdc-suite .ts-go{display:flex;align-items:center;gap:8px;height:34px;padding:0 16px;margin-left:4px;border-radius:999px;background:var(--ts-ink);color:#111;white-space:nowrap}
#tdc-suite .ts-go:hover{filter:brightness(1.06)}
#tdc-suite .ts-go svg{width:14px;height:14px;stroke-width:1.7}
#tdc-suite .ts-tool{display:none}
#tdc-suite [hidden]{display:none!important}

/* narrower screens: shed words before shedding controls */
@media (min-width:1600px){
  #tdc-suite .ts-tabs svg{display:block}
}
@media (max-width:1439px){
  #tdc-suite .ts-house,#tdc-suite .ts-sep{display:none}
  #tdc-suite{gap:14px}
}
@media (max-width:1279px){
  #tdc-suite .ts-line span{display:none}
  #tdc-suite .ts-line{padding:0;width:32px;justify-content:center}
  #tdc-suite .ts-line svg{display:block}
  #tdc-suite .ts-search{width:auto}
  #tdc-suite .ts-search span span{display:none}
}
@media (max-width:1099px){
  #tdc-suite .ts-lock .ts-bench{display:none}
  #tdc-suite .ts-tabs a{padding:0 7px;font-size:12.5px}
}
@media (max-width:959px){
  #tdc-suite .ts-tabs{display:none}
  #tdc-suite .ts-tool{display:flex}
}
/* phone: mark, the tool's name (opens the switcher), Export */
@media (max-width:759px){
  #tdc-suite{gap:10px;padding:0 12px}
  #tdc-suite .ts-search,#tdc-suite .ts-line,#tdc-suite .ts-ico{display:none}
  #tdc-suite .ts-go{height:34px;padding:0 15px;font-size:14px}
}
#tdc-suite .ts-tool{align-items:center;gap:8px;height:36px;padding:0 4px;font-size:15px;color:var(--ts-ink)}
#tdc-suite .ts-tool svg{width:16px;height:16px}
#tdc-suite .ts-tool span{white-space:nowrap}
#tdc-suite .ts-tool .ts-chev{width:12px;height:12px;color:var(--ts-dim)}

/* the switcher sheet (phone and narrow desktop) and the ⌘K palette */
.ts-layer{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.55);display:flex;font:500 13px/1.3 'DC Inter','Inter',system-ui,-apple-system,sans-serif;color:#ecebe8;-webkit-font-smoothing:antialiased}
.ts-layer[hidden]{display:none}
.ts-layer *{box-sizing:border-box}
.ts-layer svg{display:block;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ts-sheet{margin-top:auto;width:100%;max-height:85dvh;overflow:auto;background:#111113;border-top:1px solid #26262a;border-radius:16px 16px 0 0;padding:10px 18px calc(18px + env(safe-area-inset-bottom,0px))}
@media (min-width:760px){.ts-sheet{margin:calc(var(--ts-h) + 8px) auto auto 14px;width:380px;border:1px solid #26262a;border-radius:6px;max-height:calc(100dvh - var(--ts-h) - 24px)}}
.ts-handle{width:40px;height:4px;border-radius:9px;background:#3a3a3f;margin:0 auto 6px}
@media (min-width:760px){.ts-handle{display:none}}
.ts-sheet h2{margin:8px 0 6px;font:400 24px/1.1 'Newsreader','Iowan Old Style',Georgia,serif;letter-spacing:0}
.ts-sheet a{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid #26262a;color:inherit;text-decoration:none}
.ts-sheet a:last-of-type{border-bottom:0}
.ts-sheet .ts-gl{width:40px;height:40px;border:1px solid #26262a;border-radius:8px;display:flex;align-items:center;justify-content:center}
.ts-sheet .ts-gl svg{width:18px;height:18px}
.ts-sheet b{display:block;font-weight:500;font-size:15px}
.ts-sheet small{display:block;font-size:12.5px;color:#9a978f;line-height:1.35;margin-top:2px}
.ts-sheet .ts-here{font:500 10px/1 'DC Plex Mono','IBM Plex Mono',ui-monospace,monospace;letter-spacing:.12em;color:#d3b06b}
.ts-sheet .ts-foot{display:flex;gap:18px;padding-top:12px;font:400 11px/1 'DC Plex Mono','IBM Plex Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase}
.ts-sheet .ts-foot a{display:inline;border:0;padding:6px 0;color:#9a978f}
.ts-sheet a:focus-visible,.ts-pal li:focus-visible{outline:2px solid #d3b06b;outline-offset:2px}
.ts-sheet:focus{outline:none}

.ts-pal{margin:12vh auto auto;width:min(560px,calc(100% - 24px));max-height:70dvh;display:flex;flex-direction:column;background:#111113;border:1px solid #26262a;border-radius:8px;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.55)}
.ts-pal .ts-q{display:flex;align-items:center;gap:10px;padding:0 14px;height:52px;border-bottom:1px solid #26262a;color:#9a978f}
.ts-pal .ts-q svg{width:17px;height:17px}
.ts-pal input{flex:1;min-width:0;height:100%;background:none;border:0;outline:0;color:#ecebe8;font:400 16px/1 'DC Inter','Inter',system-ui,sans-serif}
.ts-pal input::placeholder{color:#7d7a73}
.ts-pal ul{list-style:none;margin:0;padding:6px;overflow:auto}
.ts-pal li.ts-h{padding:12px 10px 6px;font:400 10.5px/1 'DC Plex Mono','IBM Plex Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:#7d7a73;cursor:default}
.ts-pal li.ts-i{display:flex;align-items:center;gap:12px;padding:10px;border-radius:4px;cursor:pointer;color:#d8d6d0}
.ts-pal li.ts-i svg{width:16px;height:16px;color:#9a978f}
.ts-pal li.ts-i span{flex:1;min-width:0}
.ts-pal li.ts-i kbd{font:400 10.5px/1 'DC Plex Mono','IBM Plex Mono',ui-monospace,monospace;color:#7d7a73}
.ts-pal li.ts-i[aria-selected="true"]{background:#1d1d21;color:#ecebe8}
.ts-pal .ts-empty{padding:18px 10px;color:#7d7a73}
.ts-toast{position:fixed;left:50%;top:calc(var(--ts-h) + 12px);transform:translateX(-50%);z-index:1001;background:#ecebe8;color:#111;padding:9px 14px;border-radius:999px;font:500 13px/1 'DC Inter','Inter',system-ui,sans-serif;pointer-events:none}
.ts-toast[hidden]{display:none}

/* opening an export panel only to reach its copy buttons: keep it out of sight */
html.ts-quiet #exportPop{visibility:hidden!important}

@media (prefers-reduced-motion:reduce){#tdc-suite *,.ts-layer *{transition:none!important}}
@media print{#tdc-suite,.ts-layer,.ts-toast{display:none!important}}

/* phase 2: back chip, resume note, Recent shelf */
#tdc-suite .ts-back{display:flex;align-items:center;gap:7px;height:32px;padding:0 12px;border:1px solid var(--ts-gold);border-radius:999px;color:var(--ts-ink);white-space:nowrap}
#tdc-suite .ts-back svg{width:15px;height:15px}
#tdc-suite .ts-back:hover{background:var(--ts-raise)}
@media (max-width:759px){#tdc-suite .ts-back{display:none}}
.ts-note{position:fixed;left:50%;top:calc(var(--ts-h) + 10px);transform:translateX(-50%);z-index:90;display:flex;align-items:center;gap:6px;padding:6px 6px 6px 14px;background:#111113;border:1px solid #3a3a3f;border-radius:999px;color:#ecebe8;font:500 13px/1 'DC Inter','Inter',system-ui,sans-serif;box-shadow:0 10px 30px rgba(0,0,0,.45);white-space:nowrap}
.ts-note button{appearance:none;background:none;border:0;color:#ecebe8;font:inherit;cursor:pointer;height:28px;padding:0 10px;border-radius:999px}
.ts-note button[data-a="fresh"]{background:#ecebe8;color:#111}
.ts-note button[data-a="x"]{color:#9a978f;padding:0 8px}
.ts-note button:focus-visible{outline:2px solid #d3b06b;outline-offset:2px}
.ts-recent h3{margin:14px 0 6px;font:400 10.5px/1 'DC Plex Mono','IBM Plex Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:#7d7a73}
.ts-recent .ts-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid #26262a;color:inherit;text-decoration:none}
.ts-recent .ts-row:last-child{border-bottom:0}
.ts-recent .ts-ex{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ts-recent .ts-tile{display:flex;flex-direction:column;gap:4px;color:inherit;text-decoration:none;min-width:0}
.ts-recent .ts-th{display:block;aspect-ratio:1;background:#19191c;border:1px solid #26262a;border-radius:4px;overflow:hidden}
.ts-recent .ts-th img{width:100%;height:100%;object-fit:cover;display:block}
.ts-recent .ts-tile b{font-weight:500;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ts-recent .ts-tile small{font-size:11.5px;color:#9a978f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ts-recent .ts-tile:focus-visible,.ts-recent .ts-row:focus-visible{outline:2px solid #d3b06b;outline-offset:2px}
.ts-recent .ts-empty{margin:4px 0 8px;color:#9a978f;font-size:13px;line-height:1.45}
@media (min-width:760px){.ts-recent{width:420px!important;margin-left:auto!important;margin-right:14px!important}}

/* phase 2: the kit chip and panel */
#tdc-suite .ts-kit{display:flex;align-items:center;gap:8px;height:32px;padding:0 11px;border:1px solid var(--ts-line);border-radius:3px;color:var(--ts-ink);white-space:nowrap;max-width:150px}
#tdc-suite .ts-kit:hover{border-color:var(--ts-ctl)}
#tdc-suite .ts-kit .ts-kn{overflow:hidden;text-overflow:ellipsis}
#tdc-suite .ts-dots{display:flex;gap:3px}
#tdc-suite .ts-dots i{display:block;width:10px;height:10px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:#444}
@media (max-width:1279px){#tdc-suite .ts-kit .ts-kn{display:none}#tdc-suite .ts-kit{padding:0 8px}}
@media (max-width:759px){#tdc-suite .ts-kit{display:none}}
.ts-sheet .ts-more{display:flex;gap:8px;padding:12px 0 0}
.ts-sheet .ts-more button{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;height:42px;border:1px solid #3a3a3f;border-radius:8px;background:none;color:#ecebe8;font:500 14px/1 'DC Inter','Inter',system-ui,sans-serif;cursor:pointer}
.ts-sheet .ts-more svg{width:16px;height:16px}
@media (min-width:760px){.ts-sheet .ts-more{display:none}}
.ts-kitp{display:flex;flex-direction:column;gap:12px}
@media (min-width:760px){.ts-kitp{width:440px!important;margin-left:auto!important;margin-right:14px!important}}
.ts-kitp .ts-lede{margin:-4px 0 2px;color:#9a978f;font-size:13.5px}
.ts-kits{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.ts-kc{position:relative;display:flex;flex-direction:column;gap:6px;padding:12px;border:1px solid #26262a;border-radius:6px;cursor:pointer}
.ts-kc input{position:absolute;opacity:0;pointer-events:none}
.ts-kc:has(input:checked){border-color:#ecebe8;background:#19191c}
.ts-kc:has(input:focus-visible){outline:2px solid #d3b06b;outline-offset:2px}
.ts-kc b{font-weight:500;font-size:14px}
.ts-kc small{font-size:12px;color:#9a978f;line-height:1.4}
.ts-sw{display:flex;gap:4px}
.ts-sw i{display:block;width:20px;height:20px;border-radius:50%;border:1px solid rgba(255,255,255,.18)}
.ts-yf{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ts-yf legend{padding:0;margin-bottom:4px;font:400 10.5px/1 'DC Plex Mono','IBM Plex Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:#7d7a73}
.ts-f{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center;gap:10px;font-size:13px;color:#9a978f}
.ts-f input[type=text]{height:34px;padding:0 10px;background:#0c0c0d;border:1px solid #3a3a3f;border-radius:3px;color:#ecebe8;font:400 14px/1 'DC Inter','Inter',system-ui,sans-serif;min-width:0}
.ts-f input:focus-visible{outline:2px solid #d3b06b;outline-offset:1px}
.ts-col{display:flex;gap:8px;align-items:center}
.ts-col input[type=color]{width:40px;height:34px;padding:0;border:1px solid #3a3a3f;border-radius:3px;background:none;cursor:pointer}
.ts-col input[type=text]{width:100px;font-family:'DC Plex Mono','IBM Plex Mono',ui-monospace,monospace}
.ts-logo{display:flex;gap:8px;align-items:center}
.ts-logo img{height:34px;max-width:90px;object-fit:contain;background:#19191c;border-radius:3px;padding:3px}
.ts-lb{height:34px;padding:0 12px;border:1px solid #3a3a3f;border-radius:3px;background:none;color:#ecebe8;font:500 13px/1 'DC Inter','Inter',system-ui,sans-serif;cursor:pointer}
.ts-note2{margin:0;font-size:12.5px;color:#9a978f;line-height:1.45}
.ts-kfoot{display:flex;justify-content:flex-end;gap:8px;padding-top:4px}
.ts-ghost{height:36px;padding:0 14px;border:0;background:none;color:#9a978f;font:500 13.5px/1 'DC Inter','Inter',system-ui,sans-serif;cursor:pointer}
.ts-gob{height:36px;padding:0 18px;border:0;border-radius:999px;background:#ecebe8;color:#111;font:500 13.5px/1 'DC Inter','Inter',system-ui,sans-serif;cursor:pointer}
.ts-ghost:focus-visible,.ts-gob:focus-visible,.ts-lb:focus-visible,.ts-sheet .ts-more button:focus-visible{outline:2px solid #d3b06b;outline-offset:2px}

.ts-recent .ts-ex .ts-empty{grid-column:1/-1}

/* phase 3: one rail on Line Art, Diagram and Carousel (3D and Backgrounds have their own).
   html.ts-railed is set by suite.js only where the tool shows its desktop tab row (>900px) */
.ts-rail{position:absolute;left:0;top:0;bottom:0;width:68px;display:flex;flex-direction:column;gap:2px;padding:10px 0;border-right:1px solid #26262a;background:#111113;z-index:3;overflow-y:auto;scrollbar-width:none}
html.ts-railed #panel{padding-left:68px!important}
/* hide the tabs, not the row: Carousel keeps each section's Shuffle and Reset in it */
html.ts-railed #panel #tabrow [role=tab],html.ts-railed #panel .tabrow [role=tab]{display:none!important}
html.ts-railed .stage-tl #galBtn,html.ts-railed .stage-tl #looksBtn,html.ts-railed .stage-tl #dirBtn{display:none!important}
/* a collapsed panel takes its rail with it */
html.ts-railed #app.panel-off #panel,html.ts-railed body.collapsed #panel{padding-left:0!important}
html.ts-railed #app.panel-off .ts-rail,html.ts-railed body.collapsed .ts-rail{display:none}
.ts-ri{appearance:none;display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 2px;margin:0 4px;border:0;border-radius:6px;background:none;color:#9a978f;font:500 10.5px/1.15 'DC Inter','Inter',system-ui,-apple-system,sans-serif;text-align:center;cursor:pointer;-webkit-font-smoothing:antialiased}
.ts-ri svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ts-ri:hover{color:#ecebe8}
.ts-ri.on{color:#ecebe8;background:#1d1d21}
.ts-ri:focus-visible{outline:2px solid #d3b06b;outline-offset:-2px}
.stage-tr > .ts-moved{flex:none}
.ts-spacer{position:fixed;top:var(--ts-h,0px);left:0;width:1px;height:1px;pointer-events:none;opacity:0}

/* phase 3, the control face: words in Inter, numbers in Plex Mono (operator's r-face pick). Line Art, Diagram,
   Carousel and Studio set every control in var(--mono), so the page's --mono becomes Inter and the numbers take
   it back; the body's own font follows. 3D and Backgrounds carry their own face (html.lk.s508sans). The artwork never reads --mono (canvas in
   Line Art, Carousel and Studio; Diagram's SVG keeps it on #paper all the same). */
:root{--ts-ui:'DC Inter','Inter Variable','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;--ts-mono:'IBM Plex Mono','DC Plex Mono',ui-monospace,'SF Mono',Menlo,monospace}
html.ts-face.ts-face body{--mono:var(--ts-ui);font-family:var(--ts-ui)}   /* the tools' own body rule names Plex Mono outright, and inherited controls take it */
html.ts-face #paper{--mono:var(--ts-mono);font-family:var(--ts-mono)}        /* Diagram's SVG inherits exactly what it did before */
:is(html.ts-face,#exportPop) :is(kbd,code,pre,samp,output,.sl .vl,.sl .vin,.sl .kb,.keys b,input[type=number],.sfn,.stp>b){--mono:var(--ts-mono);font-family:var(--ts-mono)}
.ts-num{--mono:var(--ts-mono);font-family:var(--ts-mono)!important}   /* marked by suite.js: any element whose whole text is a number */
:is(html.ts-face,#exportPop) :is(textarea,input[type=text]:not(#search),.headin){font-family:var(--ts-mono)}   /* what you type stays in the house mono, as in 3D */
/* words on controls in sentence case, untracked, as 3D (S508) and Backgrounds (S510) already are. Readouts
   (counts, values, hex) keep their own casing; the page's prose below the tool is not touched. */
html.ts-face :is(.chip,.chip span,#accTxt,#btnSurprise .tx,#btnVary .tx,.lbl>span:not(.v),.fld>span,.ctl>.lbl,.mkfmt,.xbtn,
  .lsec,.gsec,.finesL,#lh span,#looks .lh h3,#looks button,.saveRow button,.btns>button,.pgo span,.kbtn,.kbtn .pr-n,.st-btn,
  .tile .tl,.tile .tl em,#app .btn,#app .btn .lg,#app .mini,#app .mlt,#app label>span,#app .field>span,nav.views button,nav.tabs button,
  #panelBody h4,#btnLike,.xmore button,#stageNote,.lockrow,.navrow span,#secnav button,#looksBtn,.st-section-label,#saveCard button,.st-count){text-transform:none!important;letter-spacing:0!important}
html.ts-face :is(.kbtn:not(.pair),.kbtn .pr-n){font-family:var(--ts-ui)!important}

/* phase 3, one export sheet: Backgrounds' two steps (its S510 look, in the shared tokens) on every tool */
:is(#exportPop,#tsXSheet) .ts-xhd{margin:0 0 4px;font:600 15px var(--ts-ui,'DC Inter',system-ui,sans-serif);color:var(--ink,#ecebe8)}
:is(#exportPop,#tsXSheet) .ts-xstep{margin:4px 0 10px}
:is(#exportPop,#tsXSheet) .ts-xh{display:flex;align-items:center;gap:8px;margin:10px 0 8px;font:600 13px var(--ts-ui,'DC Inter',system-ui,sans-serif);color:var(--ink,#ecebe8)}
:is(#exportPop,#tsXSheet) .ts-xh .n{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--gtint,rgba(211,176,107,.12));color:var(--gold,#d3b06b);font:600 11px 'IBM Plex Mono','DC Plex Mono',ui-monospace,monospace}
:is(#exportPop,#tsXSheet) .ts-xstep>.xrow{border:0;padding-top:0}
:is(#exportPop,#tsXSheet) .ts-xtabs{display:flex;gap:2px;padding:3px;border:1px solid var(--line-2,rgba(255,255,255,.14));border-radius:10px;margin-bottom:8px}
:is(#exportPop,#tsXSheet) .ts-xtabs button{flex:1;padding:8px 6px;border:0;border-radius:7px;background:none;color:var(--mute,#9a978f);font:500 13px var(--ts-ui,'DC Inter',system-ui,sans-serif);cursor:pointer;text-transform:none;letter-spacing:0}
:is(#exportPop,#tsXSheet) .ts-xtabs button:hover{color:var(--ink,#ecebe8)}
:is(#exportPop,#tsXSheet) .ts-xtabs button.on{background:var(--gtint,rgba(211,176,107,.12));color:var(--gold,#d3b06b)}
:is(#exportPop,#tsXSheet) .ts-xtabs button:focus-visible{outline:2px solid var(--gold,#d3b06b);outline-offset:1px}
:is(#exportPop,#tsXSheet) .ts-xpane[hidden],:is(#exportPop,#tsXSheet) .ts-xfoot[hidden]{display:none}
:is(#exportPop,#tsXSheet) .ts-xfoot{position:sticky;bottom:-13px;z-index:3;display:flex;gap:8px;margin:10px -13px -13px;padding:10px 13px 13px;background:linear-gradient(180deg,rgba(18,18,20,0),var(--panel-2,#141416) 26%);border-top:1px solid var(--line,rgba(255,255,255,.08))}
:is(#exportPop,#tsXSheet) .ts-xgo{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 14px;border:0;border-radius:10px;background:var(--k-ink,#ecebe8);color:var(--k-ground,#0c0c0d);font:600 13.5px var(--ts-ui,'DC Inter',system-ui,sans-serif);cursor:pointer;text-align:left}
:is(#exportPop,#tsXSheet) .ts-xgo span{font:500 11px 'IBM Plex Mono','DC Plex Mono',ui-monospace,monospace;opacity:.7}
:is(#exportPop,#tsXSheet) .ts-xgo span:empty{display:none}
:is(#exportPop,#tsXSheet) .ts-xgo:hover{filter:brightness(1.08)}
:is(#exportPop,#tsXSheet) .ts-xgo:disabled{opacity:.5;cursor:not-allowed;filter:none}
/* the face inside every export sheet, 3D's and Backgrounds' included (the rest of those two keep their own) */
#exportPop{--mono:var(--ts-ui)}
/* step 1 as Backgrounds shows it: every destination at once, a grid of name over size */
:is(#exportPop,#tsXSheet) .ts-xstep>.xrow{display:block}
:is(#exportPop,#tsXSheet) .ts-xstep :is(#xDest,#xFrame){display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;overflow:visible!important;width:auto;max-width:none;flex-wrap:wrap}
:is(#exportPop,#tsXSheet) .ts-xstep :is(#xDest,#xFrame) button{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:2px;min-width:0;height:auto;padding:8px 9px;border:1px solid var(--line-2,rgba(255,255,255,.14))!important;border-radius:8px!important;background:none;color:var(--body,#cfccc4);font:500 12.5px var(--ts-ui);text-align:left;white-space:normal;line-height:1.25}
:is(#exportPop,#tsXSheet) .ts-xstep :is(#xDest,#xFrame) button.on{border-color:var(--gold,#d3b06b)!important;color:var(--gold,#d3b06b);background:var(--gtint,rgba(211,176,107,.12))}
:is(#exportPop,#tsXSheet) .ts-xstep :is(#xDest,#xFrame) button br{display:none}
:is(#exportPop,#tsXSheet) .ts-xstep :is(#xDest,#xFrame) :is(button,button *){white-space:normal!important;overflow-wrap:anywhere;text-transform:none!important;letter-spacing:0!important}
:is(#exportPop,#tsXSheet) .ts-xstep #xFrame button .fl{font:500 12.5px var(--ts-ui)!important}
#exportPop .xhd .xhds{text-transform:none!important;letter-spacing:0!important}
:is(#exportPop,#tsXSheet) .ts-xstep :is(#xDest,#xFrame) button span{margin:0!important;font:500 11px var(--ts-mono)!important;opacity:.75}
/* Studio's sheet (built by suite.js from its own buttons), placed where the tools' export panels sit */
#tsXSheet{position:fixed;top:calc(var(--ts-h,48px) + 8px);right:12px;z-index:80;width:min(360px,calc(100vw - 24px));max-height:calc(100dvh - var(--ts-h,48px) - 24px);overflow:auto;padding:13px;
  border:1px solid rgba(255,255,255,.1);border-radius:14px;background:#141416;box-shadow:0 18px 50px rgba(0,0,0,.5);color:#cfccc4;font:400 13px var(--ts-ui);--panel-2:#141416}
#tsXSheet .xhd{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 2px}
#tsXSheet .xhdt{font:400 22px 'Newsreader Variable','Newsreader',Georgia,serif;color:#ecebe8}
#tsXSheet .xhds{font:500 11px var(--ts-mono);color:#9a978f}
#tsXSheet .ts-xdests{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
#tsXSheet .ts-xdests button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;padding:8px 9px;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:none;color:#cfccc4;font:500 12.5px var(--ts-ui);text-align:left;cursor:pointer;line-height:1.25;overflow-wrap:anywhere}
#tsXSheet .ts-xdests button span{font:500 11px var(--ts-mono);opacity:.75}
#tsXSheet .ts-xdests button.on{border-color:#d3b06b;color:#d3b06b;background:rgba(211,176,107,.12)}
#tsXSheet .ts-xr{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid rgba(255,255,255,.07)}
#tsXSheet .ts-xr b{display:block;font:500 13px var(--ts-ui);color:#ecebe8}
#tsXSheet .ts-xr small{display:block;margin-top:2px;font:400 12px var(--ts-ui);color:#9a978f}
#tsXSheet .ts-xr button{flex:none;padding:7px 12px;border:1px solid rgba(255,255,255,.16);border-radius:8px;background:none;color:#ecebe8;font:500 12px var(--ts-ui);cursor:pointer}
#tsXSheet .ts-xr button:hover,#tsXSheet .ts-xdests button:hover{border-color:rgba(255,255,255,.3)}
#tsXSheet :is(button):focus-visible{outline:2px solid #d3b06b;outline-offset:1px}
#exportPop>.xhd{display:flex;align-items:baseline;justify-content:space-between;gap:10px}

/* ── the export sheet, made premium (S519m): one primary (the footer), quiet rows, room to breathe, gold only for the
   chosen destination. Written over the tools' own row styles, so all six sheets read as one. ── */
.ts-xs{--xs-ink:#ecebe8;--xs-body:#cfccc4;--xs-mute:#8f8c85;--xs-line:rgba(255,255,255,.07);--xs-fill:rgba(255,255,255,.035);--xs-gold:#d3b06b}
@media (min-width:760px){
  #exportPop.ts-xs{width:400px!important;max-width:calc(100vw - 24px)!important;padding:18px 18px 0!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:16px!important;
    background:#131315!important;box-shadow:0 28px 70px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.35)!important}
  #tsXSheet.ts-xs{width:400px;padding:18px 18px 0;border-radius:16px;background:#131315;box-shadow:0 28px 70px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.35)}
}
.ts-xs{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}
/* header */
.ts-xs>.xhd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 6px;padding:0;border:0}
.ts-xs>.xhd .xhdt{font:400 24px/1.1 'Newsreader Variable','Newsreader',Georgia,serif!important;color:var(--xs-ink);letter-spacing:-.01em}
.ts-xs>.xhd .xhds{font:500 11px var(--ts-mono)!important;color:var(--xs-mute);text-transform:none!important;letter-spacing:0!important}
/* the two steps */
.ts-xs :is(.ts-xstep,.s510xstep){margin:18px 0 0}
.ts-xs :is(.ts-xh,.s510xh){display:flex;align-items:center;gap:9px;margin:0 0 10px;font:500 13px var(--ts-ui)!important;color:var(--xs-body)}
.ts-xs :is(.ts-xh,.s510xh) .n{width:18px;height:18px;border-radius:50%;background:none!important;border:1px solid rgba(255,255,255,.18);color:var(--xs-mute)!important;font:500 10px var(--ts-mono)!important}
/* destinations: tiles that show the frame's shape */
.ts-xs :is(#xDest,.ts-xdests){display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px!important;overflow:visible!important;padding:0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important}
.ts-xs .xrow:has(>#xDest),.ts-xs .xrow:has(>.xdest),.ts-xs .xdest{padding:0!important;border:0!important;background:none!important}
.ts-xs :is(#xDest,.ts-xdests) button{position:relative;display:grid!important;grid-template-columns:1fr;align-content:start;gap:3px;min-height:66px;padding:34px 10px 9px!important;
  border:1px solid var(--xs-line)!important;border-radius:10px!important;background:var(--xs-fill)!important;color:var(--xs-ink)!important;font:500 12.5px/1.25 var(--ts-ui)!important;
  text-align:left;white-space:normal!important;text-transform:none!important;letter-spacing:0!important;transition:border-color .15s,background .15s}
.ts-xs :is(#xDest,.ts-xdests) button :is(span,small,b){display:block;margin:0!important;font:inherit;white-space:normal!important}
.ts-xs :is(#xDest,.ts-xdests) button :is(span,small).ts-num,.ts-xs :is(#xDest,.ts-xdests) button span:last-child{font:500 10.5px var(--ts-mono)!important;color:var(--xs-mute)!important;opacity:1!important}
.ts-xs :is(#xDest,.ts-xdests) button br{display:none}
.ts-xs :is(#xDest,.ts-xdests) button:hover{border-color:rgba(255,255,255,.18)!important;background:rgba(255,255,255,.055)!important}
.ts-xs :is(#xDest,.ts-xdests) button.on{border-color:rgba(211,176,107,.75)!important;background:rgba(211,176,107,.08)!important}
.ts-xs :is(#xDest,.ts-xdests) button.on :is(span,small).ts-num,.ts-xs :is(#xDest,.ts-xdests) button.on span:last-child{color:var(--xs-gold)!important}
.ts-xs .ts-ar{position:absolute;left:10px;top:10px;height:17px;max-width:30px;border:1.25px solid rgba(255,255,255,.32);border-radius:2.5px}
.ts-xs button.on>.ts-ar{border-color:var(--xs-gold);background:rgba(211,176,107,.18)}
/* tabs: a calm segmented control */
.ts-xs :is(.ts-xtabs,.s510xtabs){gap:2px!important;padding:3px!important;margin:0 0 4px!important;border:0!important;border-radius:11px!important;background:rgba(255,255,255,.045)!important}
.ts-xs :is(.ts-xtabs,.s510xtabs) button{height:32px;padding:0 8px!important;border-radius:8px!important;color:var(--xs-mute)!important;font:500 12.5px var(--ts-ui)!important;background:none!important}
.ts-xs :is(.ts-xtabs,.s510xtabs) button:hover{color:var(--xs-ink)!important}
.ts-xs :is(.ts-xtabs,.s510xtabs) button.on{background:#2a2a2e!important;color:var(--xs-ink)!important;box-shadow:0 1px 2px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.05)}
/* rows: title, one quiet line, one quiet action */
.ts-xs :is(.ts-xpane,.s510xpane) .xrow{gap:12px!important;padding:13px 0!important;border:0!important;border-top:1px solid var(--xs-line)!important;align-items:center}
.ts-xs :is(.ts-xpane,.s510xpane) .xrow:first-child{border-top:0!important}
.ts-xs :is(.ts-xpane,.s510xpane) .xt{font:500 13.5px/1.3 var(--ts-ui)!important;color:var(--xs-ink)!important;text-transform:none!important;letter-spacing:0!important}
.ts-xs :is(.ts-xpane,.s510xpane) .xs{margin-top:3px;font:400 12px/1.45 var(--ts-ui)!important;color:var(--xs-mute)!important;text-transform:none!important;letter-spacing:0!important}
.ts-xs :is(.ts-xpane,.s510xpane) .xs.ts-num{font:500 11px var(--ts-mono)!important}
.ts-xs .badge{margin-left:6px;padding:2px 5px!important;border:0!important;border-radius:4px!important;background:rgba(255,255,255,.07)!important;color:#a9a6a0!important;font:500 9.5px var(--ts-mono)!important;letter-spacing:.05em!important;vertical-align:1px}
.ts-xs .xtok{flex:none;display:grid;place-items:center;width:34px!important;height:34px!important;border:0!important;border-radius:8px!important;background:rgba(255,255,255,.045)!important;color:var(--xs-mute)!important;font:500 9.5px var(--ts-mono)!important}
.ts-xs :is(.ts-xpane,.s510xpane,.ts-xr) :is(.xbtn,.xbtn.pri,a.xbtn,button:not(.on):not([role=tab])):not(.seg button):not(.frameseg button){
  height:30px;padding:0 13px!important;border:1px solid rgba(255,255,255,.13)!important;border-radius:8px!important;background:rgba(255,255,255,.03)!important;
  color:var(--xs-ink)!important;font:500 12.5px var(--ts-ui)!important;text-transform:none!important;letter-spacing:0!important;box-shadow:none!important;white-space:nowrap}
.ts-xs :is(.ts-xpane,.s510xpane,.ts-xr) :is(.xbtn,a.xbtn,button):hover:not(.seg button):not(.frameseg button){background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.2)!important}
.ts-xs :is(.ts-xpane,.s510xpane) .seg{gap:2px!important;padding:2px!important;border:0!important;border-radius:8px!important;background:rgba(255,255,255,.045)!important}
.ts-xs :is(.ts-xpane,.s510xpane) .seg button{height:26px;padding:0 9px!important;border:0!important;border-radius:6px!important;background:none!important;color:var(--xs-mute)!important;font:500 12px var(--ts-ui)!important}
.ts-xs :is(.ts-xpane,.s510xpane) .seg button.ts-num{font:500 11.5px var(--ts-mono)!important}
.ts-xs :is(.ts-xpane,.s510xpane) .seg button.on{background:#2a2a2e!important;color:var(--xs-ink)!important;box-shadow:0 1px 2px rgba(0,0,0,.45)}
.ts-xs .xrecent{width:100%}
/* the one primary: what it writes, on one line */
.ts-xs :is(.ts-xfoot,.s510xfoot){padding-top:12px!important;background:linear-gradient(180deg,rgba(19,19,21,0),#131315 30%)!important;border-top:1px solid var(--xs-line)!important}
.ts-xs :is(.ts-xgo,.s510go){flex-direction:row!important;align-items:center!important;justify-content:space-between!important;gap:12px;min-height:46px;padding:0 16px!important;border-radius:12px!important;
  background:#ecebe8!important;color:#0c0c0d!important;font:600 14px var(--ts-ui)!important;box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 8px 20px rgba(0,0,0,.35)}
.ts-xs :is(.ts-xgo,.s510go) span{font:500 11.5px var(--ts-mono)!important;opacity:.6!important;white-space:nowrap}
.ts-xs :is(.ts-xgo,.s510go):hover{filter:none!important;background:#fff!important}
.ts-xs .s510chk{border-radius:12px!important;border:1px solid rgba(255,255,255,.14)!important;font:500 12.5px var(--ts-ui)!important}
/* Studio's own rows, the same rhythm */
#tsXSheet .ts-xr{padding:13px 0;border-top:1px solid var(--xs-line)}
#tsXSheet .ts-xpane .ts-xr:first-child{border-top:0}
#tsXSheet .ts-xr b{font:500 13.5px/1.3 var(--ts-ui)}
#tsXSheet .ts-xr small{font:400 12px/1.45 var(--ts-ui);color:var(--xs-mute)}
/* one quiet focus ring in every sheet, for keyboard users */
.ts-xs :is(button,a,[role=tab]):focus-visible{outline:1.5px solid rgba(255,255,255,.45)!important;outline-offset:2px!important;box-shadow:none}
.ts-xs :is(button,a,[role=tab]):focus:not(:focus-visible){outline:none!important}
/* the sheet lives inside the stage's bottom-left corner, which is its own layer (z 40; Diagram 7) below the panel
   handle beside it (45; Diagram 8). A z-index on the sheet cannot leave that layer, so while the sheet is open the
   corner itself rises above the stage's furniture. */
html:not(.ts-off) #stage>.stage-bl:has(>#exportPop.open){z-index:60!important}
/* 3D's use panel under its cards: the same type and the same quiet actions, so the footer stays the one primary */
.ts-xs .usepan :is(div,p,span,small,b,label):not(.ts-num){font-family:var(--ts-ui)!important}
.ts-xs .usepan{border-color:var(--xs-line)!important;background:var(--xs-fill)!important;border-radius:12px!important}
.ts-xs .usepan button{height:32px;border:1px solid rgba(255,255,255,.13)!important;border-radius:8px!important;background:rgba(255,255,255,.03)!important;color:var(--xs-ink)!important;font:500 12.5px var(--ts-ui)!important;box-shadow:none!important}
.ts-xs .usepan button:hover{background:rgba(255,255,255,.08)!important}
.ts-xs .usegrid>*{border-color:var(--xs-line)!important;background:var(--xs-fill)!important;border-radius:10px!important}
.ts-xs .usegrid>.on,.ts-xs .usegrid>[aria-pressed="true"]{border-color:rgba(211,176,107,.75)!important;background:rgba(211,176,107,.08)!important}

/* scrolling over a card. Line Art, Backgrounds and Carousel set overscroll-behavior:contain on every element under
   #app (so a list scrolled to its end does not carry on into the page). A card or a button row clips its contents
   (overflow:hidden), which makes it a scroll box of its own, and with contain it kept the wheel: over a card the panel
   or the gallery would not scroll, only between cards. So: auto for everything, and contain again only on the areas
   that really scroll (measured in all six tools). The extra :not() outranks the tools' own rule wherever it loads. */
html:not(.dc-bare):not(.ts-x) #app *{overscroll-behavior:auto}
html:not(.dc-bare):not(.ts-x) #app :is(#body,#gallery,#looks,#looksGrid,#deskTabs,#secnav,#strip,.film,.gf,.tabs,.ts-rail,#exportPop,#pbody,#lgrid,.ascroll,#door,.ck-list,textarea){overscroll-behavior:contain}