/**
 * Zeoob Studio skin — one appearance for every simulator.
 *
 * Applies the "Instagram Post Generator Redesign" canvas to the existing markup.
 * Nothing here moves a control, hides one, or changes the export DOM: the radios the
 * tools already ship stay in place as the source of truth and keep driving the preview.
 * This restyles them and fixes the layout faults the design identified.
 *
 * Deliberately no web font. The canvas specifies Bricolage Grotesque and Public Sans,
 * but the standing rule on that same canvas is that nothing ships which adds a request.
 * Typeface is the least load-bearing part of the design and the only part that costs
 * one, so the system stack carries it.
 */

.zeoob-studio {
  --zs-ink: #17171A;
  --zs-body: #3C3A34;
  --zs-muted: #5C5A54;
  --zs-label: #726E62;          /* 5.09:1 on white; #8A867C was 3.63 and failed */
  --zs-line: #EDEBE4;      /* hairline inside a card   */
  --zs-line-2: #E5E3DC;    /* card and tab-bar borders */
  --zs-field: #DCD9D1;     /* input borders            */
  --zs-surface: #FBFAF7;   /* tab bar, drop zones      */
  --zs-stage: #F7F6F2;     /* the preview stage        */
  --zs-seg: #F2F0EA;
  --zs-accent: #F6D144;
  --zs-off: #D5D2CA;
  --zs-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------------------------------------------------------------------------
   1. The preview pins.
   The single biggest complaint in the audit: change the likes, the post is gone,
   scroll up to look, scroll back down — on every edit.
   ------------------------------------------------------------------------ */
/* Measured: the theme already puts position:sticky on the preview column via its own
   .position_stiky class — but never gives it a `top`, and sticky with top:auto never
   engages. So the preview has been scrolling away for years with the fix one line short.
   `.hom` is only the heading strip, not the column, which is why styling that did
   nothing.
   
   Only the PREVIEW column pins. The controls column carries the same class but must
   scroll normally — pinning both would lock the page. */
/* The STAGE pins, not the column. Pinning the column carried the "Live preview"
   label along with it, which parked a heading on screen for the whole page.
   That means the stage needs somewhere to travel: a floated .col-md-4 is only as
   tall as its own content, so a sticky child would unstick almost immediately.
   Making the row a flex container and letting the column stretch to the row's
   height — the height of the long controls column — gives the stage the full
   scroll to travel through. */
@media (min-width: 992px) {
  .zeoob-studio .zs-row-main {
    display: flex;
    align-items: stretch;
  }

  .zeoob-studio .zs-controls-col,
  .zeoob-studio .zs-preview-col {
    position: static;
    float: none;
  }

  /* The canvas splits the work area 820 / 492, which is 62.5 / 37.5 — not
     Bootstrap's 66.6 / 33.3. On the narrower column the stage's 26px padding was
     eating the post: 398px of column became a 344px post, well under the 440px
     the canvas draws and narrower than a real Instagram post reads. Taking the
     canvas's own ratio gives the column ~496px and the post its width back. */
  .zeoob-studio .zs-controls-col { flex: 0 0 62.5%; max-width: 62.5%; }
  .zeoob-studio .zs-preview-col { flex: 0 0 37.5%; max-width: 37.5%; }

  /* Label, stage and action row, spaced by the canvas's own 14px gap rather
     than by each one carrying a margin of its own. */
  .zeoob-studio .zs-preview-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-self: stretch;
  }

  .zeoob-studio .zs-preview-col > .zs-preview-label { margin: 0; }

  .zeoob-studio .zs-preview-col > .output_display {
    position: sticky;
    top: 5px;
    /* The action row below scrolls up behind the stage rather than over it. */
    z-index: 5;
  }

  /* The theme caps the row at 1240px and LEFT-aligns it inside a 1340px shell,
     which left 100px of dead space down the right side and none on the left.
     The canvas's work area at 1440 is 1344px wide — the shell itself, with equal
     48px gutters — so the cap goes and the row fills its container. */
  .zeoob-studio .zs-row-main,
  .zeoob-studio .width100.margin-top-bottom:has(.sp-wrapper) { max-width: none; }

  /* Bootstrap's 15px column padding, made symmetric: nothing on the outside, a
     32px gutter down the middle — the canvas's own gap — so the card is flush
     left and the stage flush right. */
  /* .position_stiky is in the compound to outrank the theme's own
     .col-md-4.margin-top-bottom.position_stiky, which sets padding-left:0 at the
     same specificity — and wins on order, because the template's inline <style>
     is printed after this file. */
  .zeoob-studio .zs-row-main > .position_stiky.zs-controls-col,
  .zeoob-studio .width100.margin-top-bottom:has(.sp-wrapper) > *:not(:has(.sp-wrapper)) { padding: 0 16px 0 0; }

  .zeoob-studio .zs-row-main > .position_stiky.zs-preview-col,
  .zeoob-studio .width100.margin-top-bottom:has(.sp-wrapper) > *:has(.sp-wrapper) { padding: 0 0 0 16px; }

  /* The controls column nests another padded row inside itself, which inset the
     card a further 15px on each side. */
  .zeoob-studio .zs-controls-col .col-xs-12.margin-0 { padding-left: 0; padding-right: 0; }

  /* The action row is NOT in the preview column — it is its own full-width row
     further down the page, sharing a line with an ad slot. So it never picked up
     the column ratio, and the download button sat ~85px to the right of the
     stage it belongs to. Matched with :has() so only the row holding the button
     is touched. */
  .zeoob-studio .width100.margin-top-bottom:has(.sp-wrapper) { float: none; }

  .zeoob-studio .width100.margin-top-bottom:has(.sp-wrapper) > *:not(:has(.sp-wrapper)) { width: 62.5%; }
  .zeoob-studio .width100.margin-top-bottom:has(.sp-wrapper) > *:has(.sp-wrapper) { width: 37.5%; }

  /* -------------------------------------------------------------------------
     And all of that again, keyed off the markup the server sends rather than
     the classes studio.js adds.

     Everything above waits for a footer script to name the two columns, so
     until it ran the desktop page was the theme's float layout and then became
     this one - laid out twice, with the second time moving a third of a
     screen. Lighthouse measured 0.357 of cumulative layout shift on desktop
     while mobile, which had already been given these twins, sat at 0.011.

     Matched by shape because the fifteen templates disagree about the row's
     class - width100 panel, col-12 panel, width100 pos-relative - while all
     fifteen agree the two columns carry .position_stiky and the stage is in
     one of them. A :has() whose argument is a direct child is the cheap kind:
     answered from the element's own children rather than by searching a
     subtree, which matters when it is offered every div on the page.

     These carry an id in :has(), so they outrank the .zs- rules above on
     specificity. That is harmless only because they say the same thing; keep
     the two lists in step.
     ---------------------------------------------------------------------- */
  .zeoob-studio div:has(> .position_stiky) {
    display: flex;
    align-items: stretch;
    max-width: none;
  }

  .zeoob-studio .position_stiky:has(#download),
  .zeoob-studio .position_stiky:not(:has(#download)) {
    position: static;
    float: none;
  }

  .zeoob-studio .position_stiky:not(:has(#download)) {
    flex: 0 0 62.5%;
    max-width: 62.5%;
    padding: 0 16px 0 0;
  }

  .zeoob-studio .position_stiky:has(#download) {
    flex: 0 0 37.5%;
    max-width: 37.5%;
    padding: 0 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-self: stretch;
  }

  .zeoob-studio .position_stiky:has(#download) > .output_display {
    position: sticky;
    top: 5px;
    z-index: 5;
  }

  /* The controls column nests another padded row inside itself. Without this
     twin the card was 30px narrower and 15px to the right until the script
     ran, and then jumped - a horizontal shift of the tallest element on the
     page, which is the whole of the 0.09 that was left on desktop. */
  .zeoob-studio .position_stiky:not(:has(#download)) .col-xs-12.margin-0 {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Below the flex breakpoint the columns stack and nothing pins. */
.zeoob-studio .zs-controls-col,
.zeoob-studio .zs-preview-col { position: static; }

/* ---------------------------------------------------------------------------
   2. The control column uses its width.
   One narrow stack inside a 60%-wide area ran the form ~1000px long, which is
   what pushed the preview off screen. Two columns inside the same panel.
   ------------------------------------------------------------------------ */
/* Measured on staging before changing anything: the page ALREADY runs two control
   panes side by side, 382px each inside a 765px tab-content. The col-sm-6 on them is
   intentional, not a defect — an earlier attempt to force them full-width broke the
   layout, which is why it is not done here.
   
   The real fault is narrower: the control block carries float:left AND display:grid,
   so it shrink-wraps to 162px inside its own 352px parent and every row is squeezed
   into a fraction of the space available. Filling the parent, with one row per line,
   is what the switches make possible — a switch row is a third the height of the
   Yes/No pair it replaces, so the column no longer runs long enough to push the
   preview off screen. */
.zeoob-studio .checkbox_redio_buttons,
.zeoob-studio .show_on_mobile,
.zeoob-studio .show_on_mobile > .col-md-12,
.zeoob-studio .checkbox_redio_buttons > .col-md-12 {
  width: 100%;
  float: none;
  box-sizing: border-box;
}

.zeoob-studio .show_on_mobile > .col-md-12.pad-0 + .col-md-12.pad-0 {
  border-top: 1px solid var(--zs-line);
}

/* ---------------------------------------------------------------------------
   3. Accent discipline.
   Brand yellow was on every field border, so it pointed at nothing. It is
   reserved for the one action that matters.
   ------------------------------------------------------------------------ */
.zeoob-studio input[type="text"],
.zeoob-studio input[type="number"],
.zeoob-studio input[type="date"],
.zeoob-studio input[type="file"],
.zeoob-studio select,
.zeoob-studio textarea {
  border: 1px solid var(--zs-field);
  border-radius: 10px;
  padding: 10px 12px;
  font: 400 14px/1.4 var(--zs-sans);
  color: var(--zs-ink);
  background: #fff;
  box-shadow: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}

.zeoob-studio input[type="text"]:focus,
.zeoob-studio input[type="number"]:focus,
.zeoob-studio input[type="date"]:focus,
.zeoob-studio select:focus,
.zeoob-studio textarea:focus {
  outline: none;
  border-color: var(--zs-ink);
  box-shadow: 0 0 0 3px rgba(23, 23, 26, .10);
}

.zeoob-studio .zeoob_label {
  font: 600 13px/1.35 var(--zs-sans);
  color: var(--zs-body);
  margin-bottom: 6px;
  display: block;
}

/* Every label carried a yellow bar, which is the accent pointing at nothing —
   the same fault as the yellow field borders. The canvas has plain labels.
   Only the empty decorative span goes; a template that puts something in it
   keeps it. */
.zeoob-studio .zeoob_label > span:empty { display: none; }

/* ---------------------------------------------------------------------------
   4. Switches replace Yes/No radio pairs.
   Ten of sixteen controls asked two questions to settle one. The radios are
   still there and still drive everything; this is their appearance.
   ------------------------------------------------------------------------ */
.zeoob-studio .zs-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  min-height: 44px;              /* touch target */
  box-sizing: border-box;
}

.zeoob-studio .zs-row .zeoob_label {
  flex: 1 1 auto;
  margin: 0;
  font-weight: 500;
  font-size: 14px;
  color: var(--zs-ink);
}

.zeoob-studio .zs-switch {
  flex: 0 0 auto;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  border-radius: 999px;
}

.zeoob-studio .zs-switch:focus-visible {
  outline: 2px solid var(--zs-ink);
  outline-offset: 3px;
}

.zeoob-studio .zs-switch > span {
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: var(--zs-off);
  display: flex;
  align-items: center;
  transition: background-color .15s ease;
}

.zeoob-studio .zs-switch > span > span {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  margin-left: 3px;
  box-shadow: 0 1px 3px rgba(20, 20, 16, .28);
  transition: margin-left .15s ease;
}

.zeoob-studio .zs-switch[aria-checked="true"] > span { background: var(--zs-ink); }
.zeoob-studio .zs-switch[aria-checked="true"] > span > span { margin-left: 23px; }

/* ---------------------------------------------------------------------------
   5. Segmented controls replace 3-way radio groups.
   ------------------------------------------------------------------------ */
.zeoob-studio .zs-seg {
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: 11px;
  background: var(--zs-seg);
}

.zeoob-studio .zs-seg button {
  flex: 1 1 0;
  min-width: 0;
  padding: 10px 6px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--zs-muted);
  font: 500 12.5px/1.2 var(--zs-sans);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color .12s ease, color .12s ease;
}

.zeoob-studio .zs-seg button[aria-pressed="true"] {
  background: var(--zs-ink);
  color: #fff;
  font-weight: 700;
}

.zeoob-studio .zs-seg button:focus-visible {
  outline: 2px solid var(--zs-ink);
  outline-offset: 2px;
}

/* The original radios stay in the DOM and keep driving the tool. */
.zeoob-studio .zs-native { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------------------------------------------------------------------------
   6. The primary action.
   It was GENERATE FAKE POST in caps, doing two jobs. Named for what it makes,
   and it is the only thing on the page wearing the accent.
   ------------------------------------------------------------------------ */
.zeoob-studio .save_btn {
  background: var(--zs-accent);
  color: var(--zs-ink);
  border: 0;
  border-radius: 12px;
  padding: 15px 22px;
  font: 700 15px/1 var(--zs-sans);
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(20, 20, 16, .14);
  transition: transform .06s ease, box-shadow .12s ease;
}

.zeoob-studio .save_btn:hover { box-shadow: 0 3px 0 rgba(20, 20, 16, .18); }
.zeoob-studio .save_btn:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(20, 20, 16, .18); }
.zeoob-studio .save_btn:focus-visible { outline: 2px solid var(--zs-ink); outline-offset: 3px; }

.zeoob-studio .save_btn[disabled],
.zeoob-studio .save_btn[aria-disabled="true"] {
  background: var(--zs-line);
  color: var(--zs-label);
  cursor: not-allowed;
  box-shadow: none;
}

/* ---------------------------------------------------------------------------
   7. The oath, in front of the download rather than nowhere.
   ------------------------------------------------------------------------ */
.zeoob-studio .zs-oath {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 11px 13px;
  margin: 0 0 12px;
  /* Accent discipline: the oath used to be a yellow box beside a yellow button,
     so neither read as the thing to act on. It is a quiet card until you agree,
     and the download is the only accent on the page. */
  border: 1px solid var(--zs-field);
  border-radius: 14px;
  background: var(--zs-surface);
  text-align: left;
  transition: border-color .15s ease, background-color .15s ease;
}

.zeoob-studio .zs-oath.is-agreed { border-color: var(--zs-ink); background: #fff; }

.zeoob-studio .zs-oath input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  flex-shrink: 0;
  accent-color: var(--zs-ink);
  cursor: pointer;
}

.zeoob-studio .zs-oath label {
  font: 400 12.5px/1.45 var(--zs-sans);
  color: var(--zs-ink);
  cursor: pointer;
  margin: 0;
}

.zeoob-studio .zs-note {
  font: 400 13px/1.5 var(--zs-sans);
  color: var(--zs-muted);
  margin: 10px 0 0;
  text-align: left;
}


/* ---------------------------------------------------------------------------
   8. The masthead.
   The canvas gives the title, the rating and the three claims one block with
   air around it and a rule under it — one row, left aligned, then space before
   the tool begins. The theme centred them and stacked them tight enough that
   the rating read as part of the heading.
   ------------------------------------------------------------------------ */
.zeoob-studio h1.portion_heading {
  font: 700 clamp(22px, 2.6vw, 30px) / 1.12 var(--zs-sans);
  letter-spacing: -.025em;
  color: var(--zs-ink);
  margin: 0;
}

.zeoob-studio ._container > .col-12.text-center {
  text-align: left;
  padding: 26px 0 20px;
  margin: 0 0 26px;
  border-bottom: 1px solid var(--zs-line-2);
}

/* The canvas has one rule, under the whole block, not one between the title
   and the rating. */
.zeoob-studio ._container > .col-12.text-center > hr { display: none; }

/* Rating and claims share a line, separated by a hairline, as drawn. */
.zeoob-studio .zeoob-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 11px;
  margin: 12px 0 0;
}

.zeoob-studio .zeoob-rating__summary { gap: 7px; margin: 0; }
.zeoob-studio .zeoob-rating__ask { flex: 1 0 100%; margin-top: 4px; }

/* display:contents lets the chips join the rating's own row instead of
   starting a second one underneath it. */
.zeoob-studio .zs-chips { display: contents; }

.zeoob-studio .zs-divider {
  width: 1px;
  height: 14px;
  background: var(--zs-line-2);
  flex: 0 0 auto;
}

.zeoob-studio .zs-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--zs-field);
  background: #F7F6F2;
  border-radius: 999px;
  padding: 4px 11px;
  font: 600 12.5px/1.35 var(--zs-sans);
  color: var(--zs-muted);
  white-space: nowrap;
}

.zeoob-studio .zs-chip--trust {
  border-color: #C9D8F0;
  background: #EEF3FC;
  color: #1A4FA3;
}

/* ---------------------------------------------------------------------------
   9. The column headings go.
   "Customize Your Instagram Post" and "Preview Your Instagram Post" said what
   the tabs and the Live preview eyebrow already say, one line apart. The canvas
   has neither; the h1 above carries the words that matter.
   Distinguished from the two-column content row, which wears the same
   .col-12.panel class, by .hom — the heading strip's own marker.
   ------------------------------------------------------------------------ */
.zeoob-studio .panel > .hom,
.zeoob-studio .panel > * > h2.portion_heading { display: none; }

/* ---------------------------------------------------------------------------
   10. The control pane is a card.
   ------------------------------------------------------------------------ */
.zeoob-studio .nav-tabs {
  max-width: none;
  display: flex;
  margin: 0;
  padding: 0;
  border: 1px solid var(--zs-line-2);
  border-bottom: 1px solid var(--zs-line-2);
  border-radius: 16px 16px 0 0;
  background: var(--zs-surface);
  /* The Saved work panel drops out of this bar, so it must not clip. The tabs
     have no background of their own, so the rounded corners still read. */
  overflow: visible;
  position: relative;
}

.zeoob-studio .nav-tabs > li,
.zeoob-studio .nav-tabs > li.presentation {
  float: none;
  /* The theme gives each tab half the bar, so the active underline ran to the
     middle of the card. The canvas sizes a tab to its own label. */
  width: auto;
  margin: 0;
  border: 0;
  background: none;
}

.zeoob-studio .nav-tabs > li > a,
.zeoob-studio .nav-tabs > li.presentation > a {
  display: block;
  height: 50px;
  padding: 0 30px;
  margin: 0;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  font: 500 14.5px/50px var(--zs-sans);
  color: var(--zs-muted);
  text-transform: none;
  letter-spacing: 0;
}

.zeoob-studio .nav-tabs > li.active > a,
.zeoob-studio .nav-tabs > li.presentation.active > a,
.zeoob-studio .nav-tabs > li.active > a:hover,
.zeoob-studio .nav-tabs > li.active > a:focus {
  border-bottom-color: var(--zs-ink);
  background: none;
  color: var(--zs-ink);
  font-weight: 700;
}

/* The theme wraps the tool in its own panel: white fill, a drop shadow and a
   #f2c500 border, so the card sat inside a second, yellow, square-cornered box.
   The canvas has one border and it is the card's. Safe to clear on both
   .post_main_area elements — the preview wrapper is .output_display, which sets
   its own fill and border at higher specificity just below. */
.zeoob-studio .post_main_area {
  background-color: transparent;
  box-shadow: none;
  border: 0;
}

/* The page's own shell keeps a soft corner, and its contents stop touching its
   edges — the card and the stage were flush against the grey on both sides. */
.zeoob-studio .interface {
  border-radius: 10px;
  padding: 24px;
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .zeoob-studio .interface { padding: 12px; }
}

/* .input_div is 90% wide with a 15px left margin, so every text field sat
   inset from its own label and stopped short of the column. */
.zeoob-studio .input_div { width: 100%; margin-left: 0; }

.zeoob-studio .tab-content {
  border: 1px solid var(--zs-line-2);
  border-top: 0;
  border-radius: 0 0 16px 16px;
  background: #fff;
  padding: 20px;
  box-sizing: border-box;
}

/* The canvas lays the card body out as two equal columns with a 26px gutter.
   The theme does it with two floated col-sm-6 panes, which is why the card had
   no height of its own — a floated child leaves its parent empty, so the border
   drew a 41px strip (its own padding) above a 900px column of controls.
   Using the grid the canvas specifies replaces the floats rather than propping
   them up: no collapse, exact gutter, and the panes stop needing their own 15px
   padding and yellow divider. Inactive panes are display:none, so the grid only
   ever places the visible ones. */
/* 992px, not 768px: below that the phone strip is in charge and shows ONE pane at
   a time, so a two-column grid reserved an empty 300px column beside it. The two
   breakpoints have to be the same one. */
@media (min-width: 992px) {
  .zeoob-studio .tab-content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
    align-content: start;
  }

  .zeoob-studio .tab-content > .tab-pane.active,
  .zeoob-studio .tab-content > .active {
    display: block;
    width: auto;
    float: none;
    padding: 0;
    border-right: 0;
  }

  /* A tab with a single pane — Comments — uses the whole card rather than
     leaving half of it empty. The count is set from JS, so this holds for all
     thirteen tools instead of being keyed to one template's class names. */
  .zeoob-studio .tab-content[data-zs-panes="1"] > .active { grid-column: 1 / -1; }
}

/* Below the grid breakpoint the panes still float and still leave .tab-content
   empty, so the card border would draw a 41px strip — its own padding — above a
   900px column of controls. flow-root contains them. overflow:hidden would too,
   but it would clip the emoji picker that opens out of the caption field.
   Confined to the narrow range: above 768px the grid above already contains the
   floats, and this rule comes later in the file, so leaving it unscoped simply
   overrode the grid with flow-root. */
@media (max-width: 991px) {
  .zeoob-studio .tab-content,
  .zeoob-studio .tab-content > .tab-pane.active,
  .zeoob-studio .tab-content > .active { display: flow-root; }

  /* One pane at a time, using the whole card. */
  .zeoob-studio .tab-content > .tab-pane.active,
  .zeoob-studio .tab-content > .active { width: 100%; float: none; padding: 0; border-right: 0; }
}

/* #options carries float:left, which shrink-wrapped the details column to its
   widest field instead of filling the pane. */
.zeoob-studio .zs-details-pane { float: none; width: 100%; }

/* The divider between the two control panes was brand yellow — the accent
   pointing at nothing again. The canvas uses a hairline. */
.zeoob-studio .border_right { border-right-color: var(--zs-line); }

/* ---------------------------------------------------------------------------
   11. The uploads.
   The canvas draws two drop targets side by side under an "Images" heading,
   each naming what it is and what it takes. The theme drew two yellow circles
   with a cloud icon and the labels "Profile Image:" / "Post Image:", which say
   nothing about what to give them.
   Scoped to the control panes: the same class names are on the preview's own
   avatar and its corner upload icon, and restyling those rewrites the post.
   ------------------------------------------------------------------------ */
.zeoob-studio .zs-uploads {
  display: flex;
  gap: 12px;
  margin: 0 0 18px;
}

.zeoob-studio .zs-up-cell {
  flex: 1 1 0;
  /* A pane with only one upload — the Comments tab — keeps it to half the row
     rather than stretching one dashed box across the whole pane. */
  max-width: calc(50% - 6px);
  min-width: 0;
  width: auto;
  float: none;
  padding: 0;
}

.zeoob-studio .zs-up-cell > .zeoob_label { display: none; }

.zeoob-studio [data-zs-zone] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 88px;
  box-sizing: border-box;
  border: 1.5px dashed #CFCBC0;
  border-radius: 12px;
  background: var(--zs-surface);
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}

.zeoob-studio [data-zs-zone]:hover {
  border-color: var(--zs-ink);
  background: #fff;
}

.zeoob-studio .zs-up-name { font: 600 13px/1 var(--zs-sans); color: var(--zs-body); }
.zeoob-studio .zs-up-hint { font: 400 11.5px/1 var(--zs-sans); color: var(--zs-label); }

/* The theme's cloud glyph is replaced by the canvas icon. */
.zeoob-studio [data-zs-zone] .upload_icon { display: none; }

/* Empty state shows the icon. The placeholder thumbnail is noise until the
   visitor has actually chosen a file, at which point it becomes the proof. */
.zeoob-studio [data-zs-zone] img[src*="default-img"],
.zeoob-studio [data-zs-zone] img[src*="no-img"] { display: none; }

.zeoob-studio [data-zs-zone] img {
  width: 40px;
  height: 40px;
  margin: 0;
  border-radius: 9px;
  object-fit: cover;
}

.zeoob-studio [data-zs-zone]:has(img:not([src*="default-img"]):not([src*="no-img"])) > svg { display: none; }

/* ---------------------------------------------------------------------------
   12. The text fields.
   Canvas names, canvas order, and the four short ones paired two to a row
   instead of each taking a full line of a column that was already too long.
   ------------------------------------------------------------------------ */
.zeoob-studio .zs-details-pane {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  /* #options carries float:left, which shrink-wrapped the details column to its
     widest field instead of filling the pane. */
  float: none;
  width: 100%;
}

.zeoob-studio .zs-details-pane > * { flex: 1 0 100%; min-width: 0; }

.zeoob-studio .zs-details-pane > .input_fields {
  flex: 1 0 100%;
  width: auto;
  margin: 0;
  float: none;
}

.zeoob-studio .zs-details-pane > .input_fields.zs-half {
  flex: 1 1 calc(50% - 5.5px);
  min-width: 0;
}

.zeoob-studio .zs-details-pane .zeoob_form_control,
.zeoob-studio .zs-details-pane textarea { width: 100%; box-sizing: border-box; }

.zeoob-studio input[type="text"],
.zeoob-studio input.zeoob_form_control { height: 44px; padding: 0 13px; }
.zeoob-studio textarea { height: auto; padding: 11px 13px; line-height: 1.5; resize: none; }

/* ---------------------------------------------------------------------------
   13. Group headings and the two kinds of setting row.
   ------------------------------------------------------------------------ */
.zeoob-studio .zs-group-title {
  display: block;
  font: 700 11.5px/1 var(--zs-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--zs-label);
  margin: 0 0 9px;
}

.zeoob-studio .zs-settings-pane > .zs-group-title { margin-top: 4px; }
.zeoob-studio .zs-settings-pane > .zs-group-title ~ .zs-group-title { margin-top: 0; }

.zeoob-studio .zs-settings-pane {
  display: flex;
  flex-wrap: wrap;
  column-gap: 12px;
  row-gap: 3px;
}

.zeoob-studio .zs-settings-pane > * { flex: 1 0 100%; min-width: 0; }

/* One segment per row, full width, as the canvas draws them. Pairing them two-up
   was an invention of mine and it truncated "Follow state" to "Follo... Hid...". */
.zeoob-studio .zs-style-row { display: block; padding: 0; margin: 0 0 12px; }

.zeoob-studio .zs-style-row .zeoob_label {
  display: block;
  font: 600 13px/1.35 var(--zs-sans);
  color: var(--zs-body);
  margin: 0 0 6px;
}

/* ---------------------------------------------------------------------------
   14. The preview column.
   ------------------------------------------------------------------------ */
.zeoob-studio .zs-preview-label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-left: 2px;
  margin: 0 0 14px;
  text-align: left;
}

.zeoob-studio .zs-eyebrow {
  font: 700 11.5px/1 var(--zs-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--zs-label);
}

.zeoob-studio .zs-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  background: var(--zs-seg);
  padding: 4px 9px;
  font: 600 11px/1.2 var(--zs-sans);
  color: var(--zs-muted);
}

/* The stage the post sits on. html2canvas captures #download, which is a child
   of this, so styling the wrapper cannot reach the exported image. */
.zeoob-studio .output_display {
  display: flex;
  justify-content: center;
  border: 1px solid var(--zs-line-2);
  border-radius: 18px;
  background: var(--zs-stage);
  padding: 20px;
  box-sizing: border-box;
}

/* The band's handle is phone furniture: a desktop preview is beside the
   controls rather than above them, so there is no split to mark and nothing to
   pull. Hidden here and turned on at the phone breakpoint, rather than the
   other way round, so a tool that never reaches that breakpoint cannot show
   it. */
.zeoob-studio .zs-band-grip { display: none; }

.zeoob-studio .zs-stage-card {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 34px rgba(20, 20, 16, .10);
  width: 100%;
}

/* ---------------------------------------------------------------------------
   15. The action row.
   .sp-wrapper holds the oath, the primary button, a secondary icon toggle
   ("Show or Hide Edit Icons in Preview"), the origin-mark note and the share
   tray. The theme floats the buttons, so the note was flowing around the icon
   toggle — "An" beside the button, the rest underneath it.
   Laid out explicitly: oath, then the buttons on one row, then the note.
   ------------------------------------------------------------------------ */
.zeoob-studio .sp-wrapper {
  /* The theme caps this at 450px, which held the download button 36px short of
     the stage's right edge once the column took the canvas's width. */
  max-width: none;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  text-align: left;
}

.zeoob-studio .sp-wrapper > .zs-oath,
.zeoob-studio .sp-wrapper > .zs-note,
.zeoob-studio .sp-wrapper > .append_btns {
  flex: 1 0 100%;
  margin: 0;
  float: none;
}

/* A flex-basis, not `auto`: with `auto` the button's basis is its own content
   width, it wins the space before wrapping is decided, and the two icon buttons
   beside it drop to a second line. 160px leaves room for both, then it grows
   into whatever is left. */
.zeoob-studio .sp-wrapper > #renderIm {
  flex: 1 1 160px;
  min-width: 0;
  order: 1;
  float: none;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
}

/* The theme adds its edit-icons toggle with jQuery .after('#renderIm') on
   ready — after this file has run — so it lands between Download and Save.
   Explicit order puts Save back beside the action it belongs to. */
.zeoob-studio .sp-wrapper > .zs-save-btn { order: 2; }
.zeoob-studio .sp-wrapper > .save_btn:not(#renderIm):not(.zs-save-btn) { order: 3; }

/* The icon toggle is secondary. It wears the same .save_btn class as the primary
   action, which put a second full-size accent block next to the one thing that
   should be wearing the accent. */
.zeoob-studio .sp-wrapper > .save_btn:not(#renderIm) {
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  min-width: 50px;
  padding: 0;
  margin: 0;
  float: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--zs-field);
  color: var(--zs-body);
  border-radius: 12px;
  box-shadow: none;
  font-size: 17px;
  line-height: 1;
}

.zeoob-studio .sp-wrapper > .save_btn:not(#renderIm):hover {
  background: var(--zs-surface);
  border-color: var(--zs-off);
  box-shadow: none;
}

.zeoob-studio .sp-wrapper > .zs-note {
  order: 5;
  font-size: 12.5px;
  line-height: 1.45;
}

.zeoob-studio .sp-wrapper > .append_btns { order: 6; }

/* ---------------------------------------------------------------------------
   16. Phone: the post pins to the top, the controls scroll underneath it,
       and the download stays one thumb away.
   ------------------------------------------------------------------------ */
@media (max-width: 991px) {
  .zeoob-studio ._container > .col-12.text-center { padding: 14px 0 12px; margin-bottom: 16px; }
  .zeoob-studio h1.portion_heading { font-size: 18px; line-height: 1.2; letter-spacing: -.02em; }
  .zeoob-studio .zeoob-rating { gap: 7px; margin-top: 8px; flex-wrap: nowrap; }
  .zeoob-studio .zeoob-rating__value,
  .zeoob-studio .zeoob-rating__count { font-size: 12px; }
  .zeoob-studio .zs-chip { font-size: 12px; padding: 0; border: 0; background: none; color: var(--zs-muted); }
  .zeoob-studio .zs-chip--trust { color: var(--zs-muted); }
  .zeoob-studio .zs-chip svg { display: none; }
  .zeoob-studio .zs-divider { height: 11px; }

  /* The phone board carries one claim, not three. All three wrapped onto three
     lines here and pushed the post below the fold, which is the one thing the
     phone layout exists to prevent. */
  .zeoob-studio .zs-chip ~ .zs-chip { display: none; }

  .zeoob-studio .nav-tabs > li > a,
  .zeoob-studio .nav-tabs > li.presentation > a { padding: 0 18px; font-size: 13.5px; }

  .zeoob-studio .tab-content { padding: 16px; }
  .zeoob-studio .output_display { padding: 14px; border-radius: 14px; }

  .zeoob-studio .zs-style-row { display: block; width: auto; margin-right: 0; }


  .zeoob-studio .sp-wrapper > .zs-oath label,
  .zeoob-studio .zs-export-flow > .zs-oath label { font-size: 13.5px; line-height: 1.45; }
  .zeoob-studio .sp-wrapper > .zs-oath,
  .zeoob-studio .zs-export-flow > .zs-oath { padding: 12px 13px; }
  .zeoob-studio .sp-wrapper > .zs-note,
  .zeoob-studio .zs-export-flow > .zs-note { font-size: 12px; }

  /* ---- the phone's export bar --------------------------------------------
     Everything that is read once sits in the page; the bar keeps the buttons.
     Before this the oath, the resolution control, two notes and the ready card
     were all pinned to the bottom - about 250px of a 650px screen, taken out
     of the part of the screen the tool is for. */
  .zeoob-studio .zs-export-flow {
    display: block;
    width: 100%;
    margin: 14px 0 0;
    text-align: left;
  }

  .zeoob-studio .zs-export-flow > .zs-quality { margin: 0 0 14px; }
  .zeoob-studio .zs-export-flow > .zs-oath { margin: 0 0 12px; }
  .zeoob-studio .zs-export-flow > .zs-note { margin: 0 0 12px; line-height: 1.45; }
  .zeoob-studio .zs-export-flow > .append_btns { margin: 0 0 12px; }
  .zeoob-studio .zs-export-flow > .zs-download-all { margin: 0; }

  .zeoob-studio .sp-wrapper.is-compact {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    margin-top: 0;
    transition: transform .22s ease;
    will-change: transform;
  }

  /* Out of the way while the reader is going down the page; back the moment
     they come up. Sticky keeps the space it occupied, so nothing reflows. */
  .zeoob-studio .sp-wrapper.is-tucked { transform: translateY(130%); }
}

@media (prefers-reduced-motion: reduce) {
  .zeoob-studio .sp-wrapper.is-compact { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .zeoob-studio * { transition: none !important; }
}

/* ---------------------------------------------------------------------------
   17. "Draft saved on this device".
   Right of the tab bar, as the canvas has it. Shown only when there is
   actually something in localStorage to restore.
   ------------------------------------------------------------------------ */
.zeoob-studio .zs-tab-spacer { flex-grow: 1; }

.zeoob-studio .zs-draft {
  display: none;
  align-items: center;
  gap: 7px;
  padding-right: 22px;
  font: 400 12.5px/1 var(--zs-sans);
  color: #6B6862;
  white-space: nowrap;
}

.zeoob-studio .zs-draft.is-on { display: inline-flex; }

@media (max-width: 767px) {
  .zeoob-studio .zs-draft { padding-right: 12px; font-size: 0; gap: 0; }
  .zeoob-studio .zs-draft svg { margin: 0; }
}

/* ---------------------------------------------------------------------------
   18. Saved work.
   The canvas puts this in the control panel's header row — cross-tool furniture,
   the same slot on every tool — rather than anywhere that depends on a tool
   having spare space.
   ------------------------------------------------------------------------ */
.zeoob-studio .zs-tab-tray {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-right: 16px;
  flex-shrink: 0;
}

.zeoob-studio .zs-saved-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--zs-field);
  border-radius: 9px;
  background: #fff;
  padding: 8px 11px;
  font: 600 12.5px/1 var(--zs-sans);
  color: var(--zs-ink);
  cursor: pointer;
  white-space: nowrap;
}

.zeoob-studio .zs-saved-btn:hover { border-color: var(--zs-ink); }
.zeoob-studio .zs-saved-btn:focus-visible { outline: 2px solid var(--zs-ink); outline-offset: 2px; }
.zeoob-studio .zs-saved-btn[aria-expanded="true"] { border-color: var(--zs-ink); box-shadow: 0 0 0 3px rgba(246, 209, 68, .45); }

.zeoob-studio .zs-saved-count {
  border-radius: 999px;
  background: var(--zs-seg);
  padding: 2px 7px;
  font: 700 11px/1.3 var(--zs-sans);
  color: var(--zs-muted);
}

.zeoob-studio .zs-saved-count.is-empty { opacity: .55; }

.zeoob-studio .zs-saved-btn svg:last-of-type { transition: transform .12s ease; }
.zeoob-studio .zs-saved-btn[aria-expanded="true"] svg:last-of-type { transform: rotate(180deg); }

.zeoob-studio .zs-saved-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 16px;
  z-index: 40;
  width: 460px;
  max-width: calc(100vw - 32px);
  border: 1px solid var(--zs-field);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 14px 40px rgba(20, 20, 16, .16);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.zeoob-studio .zs-saved-panel[hidden] { display: none; }

.zeoob-studio .zs-saved-head {
  padding: 15px 16px 13px;
  border-bottom: 1px solid var(--zs-line);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.zeoob-studio .zs-saved-head strong { font: 700 16px/1.2 var(--zs-sans); color: var(--zs-ink); }
.zeoob-studio .zs-saved-head span { font: 400 12px/1.35 var(--zs-sans); color: var(--zs-label); }

.zeoob-studio .zs-saved-filters { padding: 11px 16px; border-bottom: 1px solid var(--zs-line); }
.zeoob-studio .zs-saved-seg { border-radius: 10px; }
.zeoob-studio .zs-saved-seg button { padding: 8px 6px; font-size: 12px; border-radius: 8px; }

.zeoob-studio .zs-saved-list { max-height: 340px; overflow-y: auto; }

.zeoob-studio .zs-saved-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid #F1EFE9;
}

.zeoob-studio .zs-saved-row:last-child { border-bottom: 0; }
.zeoob-studio .zs-saved-row:hover { background: var(--zs-surface); }

.zeoob-studio .zs-saved-open {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 0;
  background: none;
  padding: 9px 6px 9px 16px;
  cursor: pointer;
  text-align: left;
}

.zeoob-studio .zs-saved-thumb {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  flex-shrink: 0;
  background: var(--zs-accent);
  position: relative;
  overflow: hidden;
}

.zeoob-studio .zs-saved-thumb::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 7px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
}

.zeoob-studio .zs-saved-thumb::after {
  content: "";
  position: absolute;
  right: -8px;
  bottom: -12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 4px solid #fff;
  box-sizing: border-box;
}

.zeoob-studio .zs-saved-text { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.zeoob-studio .zs-saved-name {
  font: 600 13px/1.25 var(--zs-sans);
  color: var(--zs-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zeoob-studio .zs-saved-meta { display: flex; align-items: center; gap: 6px; }

.zeoob-studio .zs-saved-tool {
  font: 500 11px/1.2 var(--zs-sans);
  color: var(--zs-muted);
  background: var(--zs-seg);
  border-radius: 5px;
  padding: 2px 6px;
  white-space: nowrap;
}

.zeoob-studio .zs-saved-when { font: 400 11.5px/1.2 var(--zs-sans); color: var(--zs-label); }

.zeoob-studio .zs-saved-del {
  flex: 0 0 auto;
  width: 40px;
  border: 0;
  background: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.zeoob-studio .zs-saved-del:hover { background: #F3E6E6; }

.zeoob-studio .zs-saved-empty {
  margin: 0;
  padding: 26px 16px;
  font: 400 13px/1.5 var(--zs-sans);
  color: var(--zs-label);
  text-align: center;
}

.zeoob-studio .zs-saved-foot {
  padding: 12px 16px 14px;
  border-top: 1px solid var(--zs-line);
  background: var(--zs-surface);
  display: flex;
  align-items: center;
  gap: 10px;
}

.zeoob-studio .zs-saved-foot span { font: 400 11.5px/1.45 var(--zs-sans); color: var(--zs-muted); }
.zeoob-studio .zs-saved-foot svg { flex-shrink: 0; }

/* ---------------------------------------------------------------------------
   19. Naming a save.
   ------------------------------------------------------------------------ */
.zeoob-studio .zs-name-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(20, 20, 16, .42);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.zeoob-studio .zs-name {
  width: 420px;
  max-width: 100%;
  box-sizing: border-box;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(20, 20, 16, .28);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

.zeoob-studio .zs-name strong { font: 700 16px/1.25 var(--zs-sans); color: var(--zs-ink); }
.zeoob-studio .zs-name-hint { font: 400 12.5px/1.4 var(--zs-sans); color: var(--zs-label); }

.zeoob-studio .zs-name-field {
  height: 44px;
  margin-top: 8px;
  border: 1px solid var(--zs-field);
  border-radius: 10px;
  padding: 0 13px;
  font: 400 14px/1 var(--zs-sans);
  color: var(--zs-ink);
  background: #fff;
}

.zeoob-studio .zs-name-field:focus {
  outline: none;
  border: 2px solid var(--zs-ink);
  box-shadow: 0 0 0 3px rgba(246, 209, 68, .45);
}

.zeoob-studio .zs-name-err { margin: 0; font: 400 12.5px/1.4 var(--zs-sans); color: #A5301F; }
.zeoob-studio .zs-name-err[hidden] { display: none; }

.zeoob-studio .zs-name-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }

.zeoob-studio .zs-name-cancel,
.zeoob-studio .zs-name-save {
  border-radius: 10px;
  padding: 11px 18px;
  font: 700 14px/1 var(--zs-sans);
  cursor: pointer;
}

.zeoob-studio .zs-name-cancel { border: 1px solid var(--zs-field); background: #fff; color: var(--zs-body); }
.zeoob-studio .zs-name-save { border: 0; background: var(--zs-accent); color: var(--zs-ink); box-shadow: 0 2px 0 rgba(20, 20, 16, .14); }

.zeoob-studio .zs-flash {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 12px);
  z-index: 1300;
  background: var(--zs-ink);
  color: #fff;
  border-radius: 999px;
  padding: 11px 20px;
  font: 600 13.5px/1 var(--zs-sans);
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}

.zeoob-studio .zs-flash.is-on { opacity: 1; transform: translate(-50%, 0); }

/* The Save action, beside the download, where the work is finished. */
.zeoob-studio .zs-save-btn {
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 1px solid var(--zs-field);
  border-radius: 12px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.zeoob-studio .zs-save-btn:hover { background: var(--zs-surface); border-color: var(--zs-off); }
.zeoob-studio .zs-save-btn:focus-visible { outline: 2px solid var(--zs-ink); outline-offset: 2px; }

/* ---------------------------------------------------------------------------
   20. The advertisement area.
   The canvas gives it a quiet uppercase label and a reserved frame, so it reads
   as a paid slot rather than as part of the tool.
   ------------------------------------------------------------------------ */
.zeoob-studio .ad-wrap .ads_div {
  max-width: 970px;
  margin: 0 auto;
  border: 1px solid var(--zs-line-2);
  border-radius: 10px;
  background: var(--zs-seg);
  padding: 10px;
  box-sizing: border-box;
}

.zeoob-studio .ad-wrap .ads_div > p {
  margin: 0 0 7px;
  font: 600 11px/1 var(--zs-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #6B675C;                /* 4.95:1 on the slot's tint; #9B978E was 2.55 */
  text-align: left;
}

/* Moved into the controls column by placeColumnAd(). margin-top:auto sinks it
   to the bottom of a column that is already stretched to the row's height, so
   it occupies the band the controls do not reach rather than pushing them. */
@media (min-width: 992px) {
  .zeoob-studio .zs-row-main > .position_stiky.zs-controls-col {
    display: flex;
    flex-direction: column;
  }

  .zeoob-studio .zs-col-ad {
    margin: 18px 0 0;
    padding: 0;
    width: 100%;
    float: none;
  }

  /* A reserved slot, not a slot that appears when something fills it: the
     height is held whether or not an ad is served, so the column does not
     reflow under the reader when one arrives. 250px is the standard unit
     height, and the frame reads as a paid slot even while it is empty. */
  .zeoob-studio .zs-col-ad .ads_div {
    max-width: none;
    min-height: 250px;
    padding: 12px;
    display: flex;
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .zeoob-studio .zs-tab-tray { padding-right: 10px; }
  .zeoob-studio .zs-saved-btn { padding: 7px 9px; font-size: 12px; gap: 6px; }
}

/* ---------------------------------------------------------------------------
   21. The export tray: generate, then download.
   Pressing the accent button renders the stage and fetches a marked file back;
   nothing is on the machine until a format here is pressed. So the accent moves
   to this card once it exists, and goes back to the generate button the moment
   an edit makes what is in the card out of date.
   ------------------------------------------------------------------------ */

/* The theme floats the share row right, which sent it over the top of whatever
   was appended after it. A column lays the tray out in the order it is built:
   the download card, the share row, then the link panel. */
.zeoob-studio .append_btns {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}

.zeoob-studio .zs-formats {
  flex: 0 0 auto;
  display: block;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--zs-line-2);
  border-radius: 14px;
  background: var(--zs-surface);
  text-align: left;
}

.zeoob-studio .zs-formats-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
}

.zeoob-studio .zs-formats-label {
  font: 700 13.5px/1 var(--zs-sans);
  color: var(--zs-ink);
}

/* Taken off the file itself once it exists, not predicted from the stage. */
.zeoob-studio .zs-formats-size {
  margin-left: auto;
  font: 400 11.5px/1 var(--zs-sans);
  color: var(--zs-label);
  white-space: nowrap;
}

.zeoob-studio .zs-formats-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.zeoob-studio .zs-format {
  flex: 0 1 auto;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--zs-field);
  border-radius: 12px;
  background: #fff;
  padding: 0 18px;
  font: 700 13.5px/1 var(--zs-sans);
  color: var(--zs-ink);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}

/* The one nearly everyone wants, wearing the accent the generate button was
   wearing a moment ago. */
.zeoob-studio .zs-format--primary {
  flex: 1 1 210px;
  min-height: 52px;
  padding: 0 22px;
  font-size: 15px;
  border-color: #E0BE1F;
  background: var(--zs-accent);
  box-shadow: 0 8px 20px -12px rgba(23, 23, 26, .55);
}

.zeoob-studio .zs-format:hover { border-color: var(--zs-ink); }
.zeoob-studio .zs-format--primary:hover { border-color: #C9A800; transform: translateY(-1px); }
.zeoob-studio .zs-format:focus-visible { outline: 2px solid var(--zs-ink); outline-offset: 2px; }
.zeoob-studio .zs-format[disabled] { opacity: .5; cursor: wait; transform: none; }

.zeoob-studio .zs-formats-note {
  margin: 12px 0 0;
  font: 400 12px/1.45 var(--zs-sans);
  color: var(--zs-muted);
}

/* Only after an edit has made the file behind the card out of date. */
.zeoob-studio .zs-formats-stale { display: none; }

.zeoob-studio .zs-formats.is-stale { border-color: #E8D9A8; background: #FFFCF0; }
.zeoob-studio .zs-formats.is-stale .zs-format--primary {
  background: #fff;
  border-color: var(--zs-field);
  box-shadow: none;
}
.zeoob-studio .zs-formats.is-stale .zs-formats-note { display: none; }
.zeoob-studio .zs-formats.is-stale .zs-formats-stale {
  display: block;
  margin: 12px 0 0;
  font: 600 12px/1.45 var(--zs-sans);
  color: #8A6D00;
}

/* Once a file exists, the thing to press next is the download, so the generate
   button stops competing with it. An edit takes the accent straight back - see
   markStale() - because then the thing to press next is generate again. */
/* Hidden rather than toned down: with a current file sitting right below it,
   Generate is a button with nothing to do. An edit makes the file out of date,
   markStale() drops is-exported, and it comes straight back. */
.zeoob-studio .sp-wrapper.is-exported > #renderIm { display: none; }

/* The rating ask, once studio.js has moved it out of the masthead and into the
   tray. Quiet: it is a question, asked after the work is done, not a step. */
.zeoob-studio .zs-rate-host {
  /* The ratings stylesheet declares these on .zeoob-rating, and the ask is no
     longer inside it. Without them background: var(--zr-gold) is invalid, which
     computes to nothing - so hovering a star made it vanish instead of gold. */
  --zr-gold: #f5a623;
  --zr-muted: #6b7280;

  flex: 1 0 100%;
  order: 7;
  margin: 0 0 12px;
  border: 1px solid var(--zs-line-2);
  border-radius: 14px;
  background: #fff;
  padding: 14px 16px;
}

.zeoob-studio .zs-rate-host .zeoob-rating__ask { margin: 0; }
.zeoob-studio .zs-rate-host .zeoob-rating__askText {
  margin: 0 0 8px;
  font: 600 13.5px/1.3 var(--zs-sans);
  color: var(--zs-ink);
}
.zeoob-studio .zs-rate-host .zeoob-rating__thanks {
  margin: 8px 0 0;
  font: 400 12.5px/1.45 var(--zs-sans);
  color: var(--zs-muted);
}

/* ---- the share row ---------------------------------------------------- */

/* The theme names Font Awesome classes it does not load; studio.js redraws the
   mark inside each span (normaliseSocial) and this sizes the spans themselves.
   Three selectors deep so it beats the theme's own `.share_btn_img span`
   whichever order the two stylesheets land in. */
.zeoob-studio .zs-social {
  float: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  text-align: left;
}

/* span.zs-social-label, not .zs-social-label: this row's own stylesheet sizes
   every span inside it to a 45px circle, and the label is a span too. Without
   an explicit width it took a 45px box and broke "Share the image" over three
   lines. */
.zeoob-studio .zs-social span.zs-social-label {
  flex: 0 0 auto;
  width: auto;
  height: auto;
  min-width: 0;
  white-space: nowrap;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font: 700 11.5px/1 var(--zs-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--zs-label);
  margin-right: 4px;
}

.zeoob-studio .zs-social span.img_share {
  width: 40px;
  height: 40px;
  min-width: 40px;
  margin: 0;
  float: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--zs-field);
  box-shadow: none;
  color: var(--zs-body);
  font-size: 0;
  transition: color .15s, border-color .15s, background .15s;
}

.zeoob-studio .zs-social span.img_share:focus-visible {
  outline: 2px solid var(--zs-ink);
  outline-offset: 2px;
}

.zeoob-studio .zs-social ._facebook_:hover { color: #1877F2; border-color: #1877F2; background: #F1F6FE; }
.zeoob-studio .zs-social ._twitter_:hover  { color: #1D9BF0; border-color: #1D9BF0; background: #EFF8FE; }
.zeoob-studio .zs-social ._pintrest_:hover { color: #E60023; border-color: #E60023; background: #FFF1F2; }
.zeoob-studio .zs-social ._whatsapp_:hover { color: #1FA855; border-color: #1FA855; background: #EFFBF3; }


/* ---------------------------------------------------------------------------
   22. The phone, per the canvas's Mobile board.
   The post pins to the top of the working area, the controls scroll underneath
   it in a three-way strip, and the download stays one thumb away.
   ------------------------------------------------------------------------ */
@media (max-width: 991px) {
  /* The controls stop being an off-canvas drawer. !important because the theme
     sets display inline through fadeIn/fadeOut, which an ordinary rule loses to. */
  .zeoob-studio .mobile_screen_absoute { display: block !important; min-height: 0; }
  .zeoob-studio .swap_icons_mobile { display: none !important; }

  /* Preview first, controls under it. */
  .zeoob-studio .zs-row-main { display: flex; flex-direction: column; }
  .zeoob-studio .zs-preview-col { order: -1; }
  .zeoob-studio .zs-controls-col { order: 0; }

  /* The same three rules again, keyed off the markup the server sends instead
     of the classes studio.js adds.
     
     studio.js is a footer script, so on a throttled connection it ran about
     nine seconds in. Until it did, the page laid the controls out first and
     the post below them - the theme's order - and then the post jumped to the
     top and pushed everything down. One shift of 0.97 on a phone, which is
     most of a screen, against production's 0. Now the first paint is already
     in the final order and studio.js only confirms it.

     The row is matched by its shape rather than its class because the fifteen
     templates disagree about that class - width100 panel, col-12 panel,
     width100 pos-relative - while all fifteen agree that the two columns are
     .position_stiky. The row is simply the element holding them, and a
     :has() whose argument is a direct child is the cheap kind: the engine
     answers it from the element's own children rather than searching a
     subtree, which matters when the selector is offered every div on the
     page. Which of the two columns is the post's does need a subtree search,
     but only two elements are ever asked. */
  .zeoob-studio div:has(> .position_stiky) {
    display: flex;
    flex-direction: column;
  }

  .zeoob-studio .position_stiky:has(#download) { order: -1; }
  .zeoob-studio .position_stiky:not(:has(#download)) { order: 0; }

  /* ---- the band: a rail that sticks, and a strip of it that stays --------

     Four sizes — half the screen at rest, a strip once the rail has come to
     rest under the masthead, nothing at all while the reader is going down the
     controls, and the whole screen when they ask for it — and almost all of it
     is one declaration.

     The rail is the column: a constant height that nothing ever writes to, and
     sticky with a negative offset, so it scrolls up with the page until only a
     strip of it is left below the masthead and then stops. That one sum does
     the whole collapse. The band's lower edge and the rail's are the same
     line, so it shrinks at exactly the speed the page scrolls and no gap can
     open between the post and the controls that follow it; and because the
     sticky box occupies precisely the space a static one would, nothing under
     the tool moves, ever.

     Sticky and not fixed, and this is the expensive lesson. Fixed gives the
     same picture and reads more simply, and it was measured at 0.203 of
     cumulative layout shift for a single flick: switching an element out of
     the flow is a move of that element, charged in full, and there is no grace
     period during a scroll. Sticky is exempt because the browser knows the
     offset is its own doing. The one size that still needs fixed is full, and
     that one is only ever reached by pressing or dragging, which buys it the
     half second of grace a press earns.

     Which of the four is on is studio.js's to say: see section 6c. It writes
     one attribute and nothing else, because everything here is already
     decided by the stylesheet. */

  .zeoob-studio {
    /* Half the screen for the post, with a floor for small phones and a
       ceiling for tablets; a sixth of it for the strip. vh and not dvh
       deliberately: dvh changes as the browser's own address bar hides, and a
       rail that changed height under a scroll is the one thing this must never
       do. */
    --zs-rest-h: clamp(260px, 50vh, 460px);
    --zs-peek-h: clamp(96px, 15vh, 180px);
    /* What stays pinned above the band. The masthead's own custom property, so
       a page without that masthead comes to rest at the top of the screen;
       studio.js replaces it with the measured depth, which also covers the
       admin bar WordPress shows to editors. */
    --zs-pin-top: var(--z-bar, 0px);
  }

  .zeoob-studio .zs-preview-col {
    /* Only !important can answer the theme's own !important here. */
    position: sticky !important;
    top: calc(var(--zs-pin-top, 0px) - (var(--zs-rest-h) - var(--zs-peek-h)));
    height: var(--zs-rest-h);
    flex: 0 0 auto;           /* the column is a flex item; it must not be squeezed */
    z-index: 20;              /* under the export bar and the saved-work sheet */
    background: var(--zs-stage);
    width: 100%;
    max-width: none;
    margin: 0 !important;
    padding-left: 0;
    padding-right: 0;
  }

  .zeoob-studio .zs-preview-col > .output_display {
    position: static;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    box-sizing: border-box;
    height: 100%;
    /* The swipe belongs to the page. With a scroller here the first swipe went
       inside the band, the page never moved, the band never came to rest and
       the reader was left looking at a cut-off post with no way past it -
       which is the report this answers. Full is the one size that scrolls. */
    overflow: hidden;
    padding: 10px 8px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    background: var(--zs-stage);
    box-shadow: 0 3px 12px rgba(20, 20, 16, .07);
  }

  /* Going down the controls, the strip stands aside and they have the whole
     screen. A transform, which the layout-shift metric ignores by definition -
     the box does not move, only the paint. */
  .zeoob-studio .zs-preview-col[data-zs-band="gone"] {
    transform: translateY(calc(-1 * var(--zs-peek-h)));
  }

  /* Asked for, so it may animate; and never while full, because a transform on
     this element would make it the containing block for the fixed band inside
     it and the post would land somewhere of its own choosing. */
  .zeoob-studio .zs-preview-col.zs-band-move:not([data-zs-band="full"]) {
    transition: transform .2s ease;
  }

  /* The whole screen, for reading the post rather than editing it. dvh because
     this one has to know how tall the screen really is: measured in vh it put
     its own handle below the fold. */
  .zeoob-studio .zs-preview-col[data-zs-band="full"] > .output_display {
    position: fixed;
    top: var(--zs-pin-top, 0px);
    left: 0;
    right: 0;
    height: calc(100vh - var(--zs-pin-top, 0px));
    height: calc(100dvh - var(--zs-pin-top, 0px));
    overflow-y: auto;
    /*
     * Chaining on purpose. Keeping the swipe inside the band meant that once
     * it had nothing left to scroll the finger did nothing at all and the page
     * appeared to have frozen - a reader cannot see which of two scrollers
     * they are in, only that dragging stopped working. Reaching the end hands
     * the movement to the page, which puts the band away: the way out of full
     * is to carry on in the direction you were already going.
     */
    overscroll-behavior-y: auto;
  }

  /* No transform and no movement while the export is being drawn: a
     transformed ancestor of #download comes out of html2canvas cropped, and a
     frame of the capture must not catch the band between two sizes. */
  .zeoob-studio .zs-preview-col.zs-band-still {
    transform: none !important;
  }

  .zeoob-studio .zs-preview-col.zs-band-still,
  .zeoob-studio .zs-preview-col.zs-band-still > .output_display,
  .zeoob-studio .zs-preview-col.zs-band-still > .zs-band-grip {
    transition: none !important;
  }

  /* ---- the split, and the handle that moves it ---------------------------

     At rest this is the cut line, and it is the answer to a plain report: the
     post was a window onto something taller, the tools were underneath, and
     nothing on screen said so - so the page looked like a preview that would
     not fit rather than a page that carried on. Pinned it is the strip's lower
     edge; full, the way back. One element in all three, so what was under the
     thumb a moment ago still is. */
  .zeoob-studio .zs-band-grip {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    box-sizing: border-box;
    padding: 5px 12px 6px;
    background: #fff;
    border-top: 2px solid var(--zs-accent);
    border-bottom: 1px solid var(--zs-line-2);
    text-align: center;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  .zeoob-studio .zs-band-grip:focus-visible {
    outline: 2px solid var(--zs-ink);
    outline-offset: -3px;
  }

  .zeoob-studio .zs-band-bar {
    display: block;
    width: 36px;
    height: 4px;
    margin: 0 auto 3px;
    border-radius: 3px;
    background: var(--zs-off);
  }

  .zeoob-studio .zs-band-grip-txt {
    display: block;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .01em;
    color: var(--zs-label);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Pinned needs no rule: the handle sits at the rail's lower edge and the
     rail's lower edge is the strip's. It rides along with the transform that
     puts the strip away, too.

     Full: at the foot of the screen, where a thumb already is. */
  .zeoob-studio .zs-preview-col[data-zs-band="full"] > .zs-band-grip {
    position: fixed;
    top: auto;
    bottom: 0;
    padding-bottom: max(6px, env(safe-area-inset-bottom));
    border-top: 2px solid var(--zs-accent);
    border-bottom: 0;
  }

  /* Full covers the export bar rather than stopping short of it. A 4:5 post is
     740px on a 375px screen and the bar is 77 of them: stopping short meant
     the one size whose whole purpose is to show the post whole still did not.
     The handle at the foot of the screen is the way back, so nothing is lost.
     A class of its own and not the scroll watcher's, so the two cannot argue
     about which of them last put the bar away. */
  .zeoob-studio .sp-wrapper.is-under { transform: translateY(130%); }

  /* The eyebrow is desktop furniture; on a phone the band is self-evident. */
  .zeoob-studio .zs-preview-label { display: none; }


  /* The three-way strip. */
  .zeoob-studio .zs-mtabs { padding: 12px 0 10px; }
  .zeoob-studio .zs-mtabs .zs-seg button { padding: 10px 6px; font-size: 12.5px; }

  .zeoob-studio .tab-content[data-zs-m="post"] > .zs-pane-style,
  .zeoob-studio .tab-content[data-zs-m="style"] > .zs-pane-details { display: none; }

  /* The download bar stays on screen rather than at the foot of a long page. */
  .zeoob-studio .sp-wrapper {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    margin: 0;
    padding: 10px 16px max(16px, env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid var(--zs-line);
    box-shadow: 0 -4px 14px rgba(20, 20, 16, .06);
  }

  /* ...so nothing at the foot of the page hides behind it. One row now that
     the oath, the resolution and the ready card have moved into the flow. */
  .zeoob-studio { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }

  .zeoob-studio .sp-wrapper > .zs-oath { order: -1; }
  .zeoob-studio .sp-wrapper > .zs-note,
  .zeoob-studio .sp-wrapper > .append_btns { font-size: 12px; }
}

@media (min-width: 992px) {
  .zeoob-studio .zs-mtabs { display: none; }
}

/* A header row for the tools that have no tabs, so saved work sits in the same
   place on all of them. Same card-top treatment as the tab bar. */
.zeoob-studio .zs-bar {
  display: flex;
  align-items: center;
  min-height: 50px;
  box-sizing: border-box;
  padding: 0 0 0 14px;
  margin: 0;
  border: 1px solid var(--zs-line-2);
  border-radius: 12px;
  background: var(--zs-surface);
  position: relative;
}

.zeoob-studio .zs-bar .zs-tab-spacer { flex-grow: 1; }

/* A drop target that shows it is one while a file is over it. */
.zeoob-studio [data-zs-zone].is-over {
  border-color: var(--zs-ink);
  border-style: solid;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(246, 209, 68, .45);
}

.zeoob-studio [data-zs-zone].is-over * { pointer-events: none; }

/* ---------------------------------------------------------------------------
   23. Aspect ratio.
   In the Images group, with the export size stated beside the label so the
   choice is about the file, not just the preview.
   ------------------------------------------------------------------------ */
.zeoob-studio .zs-ratio-row { display: block; clear: both; margin: 0 0 18px; }

.zeoob-studio .zs-ratio-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}

/* width:auto matters: the theme gives every .zeoob_label width:100%, and with
   flex-shrink:0 on top of it the label held the whole row, leaving the export
   size to overflow past the right edge and land beside the next column. */
.zeoob-studio .zs-ratio-head .zeoob_label { margin: 0; width: auto; flex: 0 1 auto; }

.zeoob-studio .zs-ratio-size {
  margin-left: auto;
  font: 400 11.5px/1.2 var(--zs-sans);
  color: var(--zs-label);
  white-space: nowrap;
}

.zeoob-studio .zs-ratio-row .zs-seg button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 4px;
}

.zeoob-studio .zs-ratio-row .zs-seg button svg { flex-shrink: 0; }

/* The post image follows the chosen shape, and crops rather than stretches. */
.zeoob-studio #download .post_image { overflow: hidden; }

/* ---------------------------------------------------------------------------
   24. The carousel.
   A strip in the Images group, and on the post the counter, arrows and dots
   Instagram shows by itself.
   ------------------------------------------------------------------------ */
/* clear:both, and it is load-bearing. The theme floats .width100 left, which
   .zs-uploads is, at the full width of the column. A block box is not narrowed
   by a float, but a flex container is a block formatting context and a BFC box
   shrinks to avoid one - to zero width when the float spans the whole column.
   That collapsed the heading and the thumbnail strip into the next column. */
.zeoob-studio .zs-slides-row { display: block; clear: both; margin: 0 0 18px; }

.zeoob-studio .zs-slides-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.zeoob-studio .zs-slides-title { font: 600 13px/1.35 var(--zs-sans); color: var(--zs-body); }

.zeoob-studio .zs-slides-count {
  border-radius: 999px;
  background: var(--zs-seg);
  padding: 2px 7px;
  font: 700 11px/1.35 var(--zs-sans);
  color: var(--zs-muted);
}

.zeoob-studio .zs-slides-reorder {
  margin-left: auto;
  font: 400 11.5px/1.2 var(--zs-sans);
  color: var(--zs-label);
}

.zeoob-studio .zs-slides-reorder[hidden] { display: none; }

/* While html2canvas is reading the stage: the arrows are how you move through
   a carousel, not something that belongs in the picture you hand someone. */
.zeoob-studio #download.zs-capturing .zs-slide-arrow { display: none !important; }

/* ---- reordering -------------------------------------------------------
   pan-y, not none: a vertical swipe that happens to start on a thumbnail must
   still scroll the page, while a horizontal one is ours to act on. */
.zeoob-studio .zs-slide-thumb {
  touch-action: pan-y;
  cursor: grab;
}

.zeoob-studio .zs-slide-thumb.is-dragging {
  cursor: grabbing;
  opacity: .72;
  transform: scale(1.06);
  box-shadow: 0 8px 18px -8px rgba(23, 23, 26, .5);
  z-index: 2;
}

.zeoob-studio .zs-slide-thumb:focus-visible {
  outline: 2px solid var(--zs-ink);
  outline-offset: 2px;
}

.zeoob-studio .zs-slides-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.zeoob-studio .zs-slide-thumb {
  position: relative;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 0;
  border: 1px solid var(--zs-line-2);
  border-radius: 9px;
  background-color: var(--zs-seg);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  overflow: hidden;
}

.zeoob-studio .zs-slide-thumb.is-current { border: 2px solid var(--zs-ink); }

.zeoob-studio .zs-slide-n {
  position: absolute;
  left: 3px;
  bottom: 3px;
  border-radius: 4px;
  background: rgba(23, 23, 26, .72);
  color: #fff;
  font: 700 9.5px/1 var(--zs-sans);
  padding: 2px 4px;
}

.zeoob-studio .zs-slide-x {
  position: absolute;
  right: 2px;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(23, 23, 26, .72);
  color: #fff;
  font: 700 11px/16px var(--zs-sans);
  text-align: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s ease;
}

.zeoob-studio .zs-slide-thumb:hover .zs-slide-x,
.zeoob-studio .zs-slide-thumb:focus-within .zs-slide-x { opacity: 1; }

.zeoob-studio .zs-slide-add {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border: 1.5px dashed #CFCBC0;
  border-radius: 9px;
  background: var(--zs-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.zeoob-studio .zs-slide-add:hover { border-color: var(--zs-ink); background: #fff; }

.zeoob-studio .zs-slides-hint {
  display: block;
  margin-top: 8px;
  font: 400 11.5px/1.4 var(--zs-sans);
  color: var(--zs-label);
}

/* ---- on the post ---------------------------------------------------- */
.zeoob-studio #download .post_image { position: relative; }

.zeoob-studio .zs-slide-counter {
  position: absolute;
  right: 12px;
  top: 12px;
  border-radius: 999px;
  background: rgba(23, 23, 26, .72);
  color: #fff;
  font: 700 12px/1 var(--zs-sans);
  padding: 6px 10px;
  z-index: 3;
}

.zeoob-studio .zs-slide-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, .92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(20, 20, 16, .14);
  z-index: 3;
}

.zeoob-studio .zs-slide-prev { left: 10px; }
.zeoob-studio .zs-slide-next { right: 10px; }
.zeoob-studio .zs-slide-counter[hidden],
.zeoob-studio .zs-slide-arrow[hidden] { display: none; }

.zeoob-studio .zs-slide-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 11px 0 1px;
}

.zeoob-studio .zs-slide-dots[hidden] { display: none; }

.zeoob-studio .zs-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #BFBFBF;
}

.zeoob-studio .zs-dot.is-current { background: #0095F6; }

.zeoob-studio .zs-download-all {
  flex: 1 0 100%;
  order: 7;
  margin: 6px 0 0;
  font: 400 12.5px/1.45 var(--zs-sans);
  color: var(--zs-muted);
  text-align: left;
}

.zeoob-studio .zs-download-all[hidden] { display: none; }
.zeoob-studio .zs-download-all a { font-weight: 600; color: #1A4FA3; text-decoration: none; cursor: pointer; }
.zeoob-studio .zs-download-all a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   25. Share links.
   Offered next to the formats, because there is nothing to share until an
   export exists.
   ------------------------------------------------------------------------ */
.zeoob-studio .zs-share {
  flex: 1 0 100%;
  margin: 12px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--zs-field);
  border-radius: 14px;
  background: var(--zs-surface);
  text-align: left;
}

.zeoob-studio .zs-share-title {
  display: block;
  font: 700 13px/1.3 var(--zs-sans);
  color: var(--zs-ink);
  margin-bottom: 10px;
}

.zeoob-studio .zs-share-why {
  margin: 0 0 10px;
  font: 400 12.5px/1.45 var(--zs-sans);
  color: var(--zs-muted);
}

.zeoob-studio .zs-share-login {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--zs-field);
  border-radius: 10px;
  background: #fff;
  padding: 10px 16px;
  font: 700 13px/1 var(--zs-sans);
  color: var(--zs-ink);
  text-decoration: none;
}

.zeoob-studio .zs-share-login:hover { border-color: var(--zs-ink); }

.zeoob-studio .zs-share-field { margin-bottom: 10px; }
.zeoob-studio .zs-share-field .zeoob_label { margin-bottom: 6px; }
.zeoob-studio .zs-share-seg { background: #fff; border: 1px solid var(--zs-field); }

.zeoob-studio .zs-share-pin {
  width: 100%;
  height: 42px;
  box-sizing: border-box;
  border: 1px solid var(--zs-field);
  border-radius: 10px;
  padding: 0 13px;
  font: 400 14px/1 var(--zs-sans);
  background: #fff;
}

.zeoob-studio .zs-share-make {
  border: 1px solid var(--zs-ink);
  border-radius: 10px;
  background: #fff;
  padding: 11px 18px;
  font: 700 13px/1 var(--zs-sans);
  color: var(--zs-ink);
  cursor: pointer;
}

.zeoob-studio .zs-share-make[disabled] { opacity: .55; cursor: wait; }

.zeoob-studio .zs-share-result { margin-top: 12px; }
.zeoob-studio .zs-share-result[hidden] { display: none; }

.zeoob-studio .zs-share-url-row { display: flex; gap: 8px; }

.zeoob-studio .zs-share-url {
  flex: 1 1 auto;
  min-width: 0;
  height: 42px;
  box-sizing: border-box;
  border: 1px solid var(--zs-field);
  border-radius: 10px;
  padding: 0 13px;
  font: 500 13px/1 var(--zs-sans);
  background: #fff;
  color: var(--zs-ink);
}

.zeoob-studio .zs-share-copy {
  flex: 0 0 auto;
  border: 0;
  border-radius: 10px;
  background: var(--zs-accent);
  color: var(--zs-ink);
  padding: 0 18px;
  font: 700 13px/1 var(--zs-sans);
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(20, 20, 16, .14);
}

.zeoob-studio .zs-share-note {
  margin: 8px 0 0;
  font: 400 12px/1.45 var(--zs-sans);
  color: var(--zs-muted);
}

/* ---------------------------------------------------------------------------
   25b. Resolution.
   Above the oath and the button, because the size is decided when the stage is
   rendered - by the time there is a file, it is already whatever it is.
   ------------------------------------------------------------------------ */
.zeoob-studio .sp-wrapper > .zs-quality {
  flex: 1 0 100%;
  order: -2;
  margin: 0 0 12px;
  text-align: left;
}

.zeoob-studio .zs-quality-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 7px;
}

.zeoob-studio .zs-quality-label {
  font: 700 11.5px/1 var(--zs-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--zs-label);
}

/* Measured off the stage every time it could have changed, never asserted. */
.zeoob-studio .zs-quality-size {
  margin-left: auto;
  font: 400 11.5px/1.2 var(--zs-sans);
  color: var(--zs-label);
  white-space: nowrap;
}

.zeoob-studio .zs-quality-seg {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--zs-seg);
}

.zeoob-studio .zs-quality-opt {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 38px;
  padding: 0 8px;
  border: 0;
  border-radius: 9px;
  background: none;
  font: 600 12.5px/1 var(--zs-sans);
  color: var(--zs-muted);
  cursor: pointer;
  transition: background .15s, color .15s;
}

.zeoob-studio .zs-quality-opt:hover { color: var(--zs-ink); }
.zeoob-studio .zs-quality-opt.is-on {
  background: var(--zs-ink);
  color: #fff;
  font-weight: 700;
}
.zeoob-studio .zs-quality-opt:focus-visible { outline: 2px solid var(--zs-ink); outline-offset: 2px; }
.zeoob-studio .zs-quality-opt.is-locked { color: #66625A; }   /* 5.33:1 on the segment's tint */
.zeoob-studio .zs-quality-opt.is-locked svg { opacity: .75; flex-shrink: 0; }

.zeoob-studio .zs-quality-note {
  margin: 7px 0 0;
  font: 400 12px/1.45 var(--zs-sans);
  color: var(--zs-muted);
}
.zeoob-studio .zs-quality-note[hidden] { display: none; }
.zeoob-studio .zs-quality-note a { color: var(--zs-ink); font-weight: 700; }

/* ---------------------------------------------------------------------------
   25c. The tips card, and the three lines that left it.
   The card sits below the studio, in the content region, and is styled as
   content: it is something to read, not a control. The hints are one line each,
   under the control they are about.
   ------------------------------------------------------------------------ */
.zeoob-studio .zs-hint {
  margin: 7px 0 0;
  font: 400 12.5px/1.5 var(--zs-sans);
  color: var(--zs-muted);
}

/* Same as the preview label: a flex row of a checkbox and its text, so the
   hint needs a line of its own rather than a third seat on that one. */
/* The row wraps so the hint can have a line of its own - but only the hint.
   Without a zero basis the label is sized by its own text, finds it does not
   fit beside the checkbox, and takes the next line, leaving the checkbox
   stranded on a line by itself. */
.zeoob-studio .zs-oath { flex-wrap: wrap; }
.zeoob-studio .zs-oath label { flex: 1 1 0; min-width: 0; }
.zeoob-studio .zs-oath .zs-hint {
  flex: 1 0 100%;
  width: 100%;
  min-width: 0;
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--zs-line);
  font-size: 11.5px;
  line-height: 1.45;
}

/* The label is a flex row of an eyebrow and a pill; without the wrap the hint
   is a third item on that line and runs off the side of the page. */
.zeoob-studio .zs-preview-label { flex-wrap: wrap; }
.zeoob-studio .zs-preview-label .zs-hint {
  margin: 6px 0 0;
  flex: 1 0 100%;
  width: 100%;
  min-width: 0;
}

.zs-tips-host {
  display: block;
  width: 100%;
  clear: both;
  margin: 26px 0;
  text-align: left;
}

.zs-tips {
  border: 1px solid var(--zs-line-2, #E5E3DC);
  border-radius: 14px;
  background: #fff;
  padding: 22px 24px;
}

.zs-tips-title {
  margin: 0;
  font: 700 19px/1.3 var(--zs-sans);
  color: var(--zs-ink, #17171A);
}

.zs-tips-summary {
  margin: 7px 0 0;
  font: 400 14.5px/1.55 var(--zs-sans);
  color: var(--zs-muted, #5C5A54);
  max-width: 62ch;
}

.zs-tips-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  border: 1px solid var(--zs-field, #DCD9D1);
  border-radius: 10px;
  padding: 11px 16px;
  font: 600 13.5px/1 var(--zs-sans);
  color: var(--zs-ink, #17171A);
  text-decoration: none;
}
.zs-tips-go:hover { border-color: var(--zs-ink, #17171A); }

.zs-tips-list {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 32px;
}

.zs-tips-list > li {
  break-inside: avoid;
  margin: 0 0 14px;
  padding: 0 0 0 15px;
  position: relative;
  font: 400 14px/1.6 var(--zs-sans);
  color: var(--zs-body, #3C3A34);
}

.zs-tips-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--zs-accent, #F6D144);
}

.zs-tips-list > li > b { color: var(--zs-ink, #17171A); font-weight: 700; }

@media (max-width: 767px) {
  .zs-tips { padding: 17px 16px; }
  .zs-tips-title { font-size: 17px; }
  .zs-tips-list { columns: 1; }
}

/* ---------------------------------------------------------------------------
   26. The export tray on a phone.
   Last in the file on purpose: these override section 21 at the same
   specificity, and at equal specificity the later rule is the one that wins.
   ------------------------------------------------------------------------ */
@media (max-width: 991px) {
  .zeoob-studio .zs-formats { padding: 13px; }
  .zeoob-studio .zs-formats-buttons { gap: 8px; }
  .zeoob-studio .zs-format,
  .zeoob-studio .zs-format--primary { flex: 1 1 100%; }

  /* Label on its own line, then all four marks together - otherwise the row
     breaks after the second icon and the set reads as two broken halves. */
  .zeoob-studio .zs-social span.zs-social-label { flex: 1 0 100%; margin: 0 0 4px; }

  /* Three buttons, one row. The desktop basis of 160px plus two 50px icon
     buttons and their gaps is wider than a phone column, which put the
     theme's icon toggle on a line of its own. */
  .zeoob-studio .sp-wrapper > #renderIm { flex: 1 1 110px; }
}

/* ---------------------------------------------------------------------------
   27. The phone, properly.

   Three separate things made the tool poor on a phone, and the first one
   made the other two look worse than they were.

   The page scrolled sideways. .nav-tabs is a nowrap flex row inside a
   floated box, and a float is shrink-to-fit: when the row's minimum content
   width exceeds the space, the float grows instead of the row wrapping. The
   saved-work button we add to that row is what pushed the minimum past a
   375px screen, so the document became 400px wide and every column in it sat
   25px off. Measured, not guessed: hiding the button or letting the row wrap
   each brought document.scrollWidth back to exactly the viewport.

   The post was capped at 250px - a third of the screen discarded in a tool
   that exists to show that box, and a smaller export with it, because the
   stage's pixel size is what gets rendered.

   And the two tab rows said the same thing twice: the theme's Post/Comments
   above our Post/Style/Comments, which drives it.
   ------------------------------------------------------------------------ */
@media (max-width: 991px) {
  /* A row that wraps cannot force its container wider than the screen. This
     is the safety net; the rule below is what actually keeps it to one line. */
  .zeoob-studio .nav-tabs { flex-wrap: wrap; }
  .zeoob-studio .zs-tab-tray { min-width: 0; }

  /* One set of tabs. The strip below drives these, so with the strip present
     the theme's row has nothing left to say and gives its width to saved
     work. Scoped to the class studio.js sets only once the strip is built:
     on a tool without one, these are still the only tabs there are. */
  .zeoob-studio.zs-has-mtabs .nav-tabs > li { display: none; }
  .zeoob-studio.zs-has-mtabs .nav-tabs { padding-left: 4px; }
  .zeoob-studio.zs-has-mtabs .zs-tab-tray { margin-left: auto; }

  /* The whole tool takes the screen, not a card floating on it. With only the
     band breaking out, the theme's grey shell showed above and below the post
     as a seam, and the post was the only thing on the page that reached the
     edge. The shell is the outermost thing the tool owns, so the breakout
     belongs on it and everything inside then lines up without moving.
     studio.js measures the gutter and sets --zs-gutter here. */
  .zeoob-studio .col-12.interface {
    width: calc(100% + 2 * var(--zs-gutter, 0px));
    margin-left: calc(-1 * var(--zs-gutter, 0px));
    margin-right: calc(-1 * var(--zs-gutter, 0px));
    max-width: none;
    padding: 0;
    border-radius: 0;
    background: #fff;
  }

  /* The shell's 12px is what used to hold the controls off the edge. */
  .zeoob-studio .zs-controls-col { padding-left: 12px; padding-right: 12px; }

  /* Saved work opens under the whole row, not under the button.
     The panel is positioned against .zs-tab-tray, which used to sit at the
     left of the tab row; now that the row is the button's alone it sits at
     the right, and "left: 0" put 150px of a 375px screen off the edge. Taking
     the tray out of the positioning chain hands the panel to .nav-tabs, which
     is as wide as the card. */
  .zeoob-studio .zs-tab-tray { position: static; }

  /* The theme makes the controls column sticky with a z-index of 9 for the
     off-canvas drawer it used to be. That is a stacking context, so the sheet
     inside it could not rise above the pinned post whatever z-index it asked
     for - it opened behind the picture. The drawer is gone; the context that
     served it can go too. */
  .zeoob-studio .zs-controls-col.mobile_screen_absoute {
    position: relative !important;
    z-index: auto;
  }

  /* A sheet, not a dropdown. Hung off the button it opened three quarters of
     a screen below the fold and behind the export bar, so the press appeared
     to do nothing - which is how this control has failed twice before. */
  .zeoob-studio .zs-saved-panel {
    position: fixed;
    top: auto;
    left: 8px;
    right: 8px;
    bottom: calc(88px + env(safe-area-inset-bottom));
    width: auto;
    max-width: none;
    max-height: 66vh;
    z-index: 70;
  }

  /* As wide as the screen allows, always. Never narrowed to buy height, and
     never transformed: html2canvas sizes its canvas from the drawn rectangle
     but renders the clone at its own layout size, so a scaled ancestor
     produces a cropped file. */
  .zeoob-studio .zs-stage-card {
    max-width: 450px;
    width: 100%;
    flex: 0 0 auto;
    margin: 0 auto;
  }
}

/* A phone on its side. 360px of height cannot carry a pinned band and an
   export bar and have anything left to edit in - the band was taking 95% of
   the screen. So on a short viewport the preview scrolls with the page like
   any other block. studio.js stops fitting it to a band at the same height. */
@media (max-width: 991px) and (max-height: 559px) {
  .zeoob-studio .zs-preview-col {
    position: relative !important;
    height: auto;
    z-index: auto;
  }

  .zeoob-studio .zs-preview-col > .output_display {
    position: static !important;
    height: auto;
    max-height: 78vh;
    overflow-y: auto;
    padding: 8px;
  }

  .zeoob-studio .zs-band-grip { display: none; }
}

/* ---------------------------------------------------------------------------
   27b. A button that is not ready, and says so when pressed.

   It used to carry [disabled], which stops the browser dispatching a click at
   all - so the press that should have explained the hold-up was the one press
   nothing could hear. It is locked instead: pressable, clearly not the live
   button, and it answers.
   ------------------------------------------------------------------------ */
/* The segment sits on a tint, where the muted token is a third of a point
   short of 4.5:1. Both states get the shade that clears it. */
.zeoob-studio .zs-quality-opt { color: #66625A; }

.zeoob-studio .save_btn.is-locked,
.zeoob-studio .save_btn[aria-disabled="true"] {
  background: var(--zs-line);
  color: var(--zs-label);
  box-shadow: none;
}

.zeoob-studio .save_btn.is-locked:hover { box-shadow: none; }
.zeoob-studio .save_btn.is-locked:active { transform: translateY(1px); }

.zeoob-studio .zs-oath.is-asking {
  border-color: var(--zs-ink);
  animation: zs-ask 2.4s ease-out 1;
}

@keyframes zs-ask {
  0%, 100% { box-shadow: 0 0 0 0 rgba(246, 209, 68, 0); }
  8%, 34%  { box-shadow: 0 0 0 4px rgba(246, 209, 68, .85); }
  20%      { box-shadow: 0 0 0 2px rgba(246, 209, 68, .5); }
  60%      { box-shadow: 0 0 0 3px rgba(246, 209, 68, .45); }
}

@media (prefers-reduced-motion: reduce) {
  .zeoob-studio .zs-oath.is-asking {
    animation: none;
    box-shadow: 0 0 0 3px rgba(246, 209, 68, .7);
  }
}

/* ---------------------------------------------------------------------------
   28. A control that cannot reach anything.

   Turn the header row off and the account name, the verified tick, the story
   ring, the location and the dots go with it - but their controls stayed live,
   so pressing them did nothing and the tool gave no reason. Dimmed, refused
   and carrying the reason, rather than accepting the press and ignoring it.
   ------------------------------------------------------------------------ */
.zeoob-studio .zs-locked {
  opacity: .5;
  cursor: not-allowed;
}

.zeoob-studio .zs-locked .zs-switch,
.zeoob-studio .zs-locked .zs-seg,
.zeoob-studio .zs-locked input,
.zeoob-studio .zs-locked textarea,
.zeoob-studio .zs-locked .upload_icon {
  pointer-events: none;
}

/* The upload cell is a picture with a hit area over it; without this the
   cursor still promises a file picker. */
.zeoob-studio .zs-up-cell.zs-locked [data-zs-zone],
.zeoob-studio .zs-locked .upload_profile_img { cursor: not-allowed; }


/* ---------------------------------------------------------------------------
   29. Accessibility corrections found by audit.
   ------------------------------------------------------------------------ */

/* The draft chip and the saved-work button sit over the right-hand end of the
   tab bar rather than inside it: a <ul role="tablist"> may own only tabs, and
   anything else in there is announced as part of that pattern. Out of flow, so
   taking them out of the list changed nothing about the bar's size. */
.zeoob-studio .nav-tabs { min-height: 52px; }

.zeoob-studio .zs-tabbar-host { position: relative; }

.zeoob-studio .zs-bar-extras {
  position: absolute;
  top: 0;
  right: 14px;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  /*
   * No z-index, deliberately. A z-index here makes this a stacking context,
   * and the saved-work sheet lives inside it: whatever the sheet then asks
   * for, it is stacked as a 3, which put it behind the pinned preview at 20
   * and left the reader pressing a button that appeared to do nothing. It is
   * positioned and comes after the tab list in the DOM, so it paints above it
   * without needing one.
   */
}

@media (max-width: 767px) {
  .zeoob-studio .zs-bar-extras { right: 10px; gap: 6px; }
}

/* Links in the prose carried their meaning in colour alone: 1.39:1 against the
   text around them, where 3:1 is the floor for telling them apart without it.
   Underlining is the answer the guideline actually names. */
.zeoob-studio .tool-description a,
.zeoob-studio .zs-tips a,
.zeoob-studio .width100 > p > a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Holding the press while html2canvas arrives. Rare - it is warmed on the
   first touch of the tool - but a button that has been pressed and is doing
   something has to look like it. */
.zeoob-studio .save_btn.is-busy {
  opacity: .7;
  cursor: progress;
}