@import url("https://fonts.googleapis.com/css2?family=Tomorrow:wght@500;600;700&family=Space+Mono:wght@400;700&display=swap");
/*
 * SpaceTools · Theme v2  (ui-v2-motion branch, staging first)
 * ---------------------------------------------------------------
 * The minimal design language from the prototype, as one additive
 * stylesheet. Everything is scoped to html.st-v2, which
 * spacetools-motion-v2.js sets, so removing the include lines brings
 * the current look back unchanged.
 *
 *   0. tokens (new + remap of the old --bg/--card/--st-* tokens)
 *   1. page canvas
 *   2. header: flat bar, wordmark, plain tabs, underline at the edge
 *   3. dropdowns + header actions
 *   4. shared pieces: headings, buttons, inputs, cards, chips
 *   5. per-page sections (body[data-st-page=...])
 */

/* ---------- 0. tokens ---------- */

html.st-v2 {
  --v2-bg: #0c0911;
  --v2-s1: #120e18;
  --v2-s2: #16111d;
  --v2-s3: #1b1523;
  --v2-line: #211a2a;
  --v2-line-2: #2b2336;
  --v2-text: #f3eff7;
  --v2-muted: #8e869b;
  --v2-dim: #6f6780;
  --v2-acc: #c4a3f2;
  --v2-acc-h: #e2d1fa;
  --v2-acc-soft: rgba(196, 163, 242, .10);
  --v2-acc-line: rgba(196, 163, 242, .32);
  --v2-orange: #ff7a2e;
  --v2-radius: 14px;
  --v2-radius-sm: 10px;
  --v2-ease: cubic-bezier(.22, 1, .36, 1);
  --v2-mono: "Space Mono", ui-monospace, Menlo, Consolas, monospace;
  --v2-display: "Tomorrow", "Plus Jakarta Sans", system-ui, sans-serif;

  /* old tokens, remapped so existing rules follow the new palette */
  --bg: #0c0911 !important;
  --bg-soft: #120e18 !important;
  --card: #120e18 !important;
  --card-hover: #16111d !important;
  --border: #211a2a !important;
  --text: #f3eff7 !important;
  --muted: #8e869b !important;
  --accent: #2c2338 !important;
  --accent2: #c4a3f2 !important;
  --accent3: #1b1523 !important;
  --accent-soft: rgba(196, 163, 242, .10) !important;
  --accent-purple: #2c2338 !important;
  --accent-purple-soft: rgba(196, 163, 242, .10) !important;
  --success: #7ee0a8 !important;
  --glow: transparent !important;

  --st-bg: #0c0911 !important;
  --st-bg-raised: #120e18 !important;
  --st-surface: #120e18 !important;
  --st-surface-strong: #120e18 !important;
  --st-surface-hover: #16111d !important;
  --st-text: #f3eff7 !important;
  --st-muted: #8e869b !important;
  --st-muted-2: #6f6780 !important;
  --st-purple: #2c2338 !important;
  --st-purple-deep: #1b1523 !important;
  --st-purple-mid: #3a2d4d !important;
  --st-lavender: #c4a3f2 !important;
  --st-lavender-soft: #e2d1fa !important;
  --st-border: #211a2a !important;
  --st-border-soft: #211a2a !important;
  --st-glow: transparent !important;
  --st-glow-strong: transparent !important;
  --workspace-focus: #c4a3f2 !important;
  --workspace-edge: #211a2a !important;

  background: #0c0911 !important;
  scrollbar-color: #2b2336 transparent;
}

/* ---------- 1. page canvas ---------- */

html.st-v2 body {
  background: #0c0911 !important;
  color: #f3eff7;
  padding-top: 0 !important;
}
html.st-v2 .bg-blobs,
html.st-v2 #bgParticles { display: none !important; }
html.st-v2 ::selection { background: rgba(196, 163, 242, .28); color: #fff; }
html.st-v2 ::-webkit-scrollbar-thumb { background: #2b2336; border-color: #0c0911; }
html.st-v2 ::-webkit-scrollbar-thumb:hover { background: #3a3048; }

html.st-v2 #st-page-content { padding-top: 32px; }

/* ---------- 2. header (Proto: solid bar, left tabs, finder, stars, avatar) ---------- */

html.st-v2 body #st-navigation.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 10040 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #0c0911 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transform: none !important;
  filter: none !important;
  border: 0 !important;
  border-bottom: 1px solid #211a2a !important;
  box-shadow: none !important;
}
html.st-v2 body #st-navigation.site-header > .topbar {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* logo: mark + wordmark */
html.st-v2 body #st-navigation .brand {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 64px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px;
  text-decoration: none;
  transform: none !important;
}
html.st-v2 body #st-navigation .brand::after {
  content: "SpaceTools";
  color: #f3eff7;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
}
html.st-v2 body #st-navigation .brand-logo-wrap {
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  overflow: visible !important;
  transform: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
html.st-v2 body #st-navigation .brand-logo-wrap::before,
html.st-v2 body #st-navigation .brand-logo-wrap::after { display: none !important; }
html.st-v2 body #st-navigation .brand-logo-wrap img.spacetools-icon-logo {
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  margin: 0 !important;
  transform: none !important;
  filter: none !important;
}

/* tabs */
html.st-v2 #st-navigation .tabs .tab::after,
html.st-v2 #st-navigation .tabs .tab::before,
html.st-v2 #st-navigation .tabs::before,
html.st-v2 #st-navigation .tabs::after { display: none !important; }
html.st-v2 #st-navigation .tabs .nav-dot { display: none !important; }

@media (min-width: 1101px) {
  html.st-v2 body #st-navigation.site-header > .topbar {
    display: flex !important;
    align-items: center !important;
    gap: 40px !important;
    width: auto !important;
    max-width: none !important;
    height: 64px !important;
    min-height: 64px !important;
    margin: 0 !important;
    padding: 0 32px !important;
  }
  html.st-v2 #st-navigation .tabs-island {
    position: static !important;
    flex: 0 0 auto !important;
    justify-self: auto !important;
    height: 64px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transform: none !important;
  }
  html.st-v2 #st-navigation .tabs {
    position: relative !important;
    height: 64px !important;
    padding: 0 !important;
    gap: 4px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    isolation: auto !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    filter: none !important;
    transform: none !important;
  }
  html.st-v2 #st-navigation .tabs > .tab,
  html.st-v2 #st-navigation .tabs > .st-native-nav-group > .st-native-nav-trigger {
    height: 64px !important;
    min-height: 64px !important;
    padding: 0 16px !important;
    gap: 6px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #8e869b !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    transform: none !important;
    transition: color .25s ease !important;
  }
  html.st-v2 #st-navigation .tabs > .st-native-nav-group { position: static !important; height: 64px; }
  html.st-v2 #st-navigation .topbar-actions { margin-left: auto !important; gap: 14px !important; }
  html.st-v2 .st-v2-ind { bottom: -1px !important; height: 2px; }
}
html.st-v2 #st-navigation .tabs > .tab:hover,
html.st-v2 #st-navigation .tabs > .tab.active,
html.st-v2 #st-navigation .tabs > .st-native-nav-group:hover > .st-native-nav-trigger,
html.st-v2 #st-navigation .tabs > .st-native-nav-group:focus-within > .st-native-nav-trigger,
html.st-v2 #st-navigation .tabs > .st-native-nav-group > .st-native-nav-trigger.active {
  color: #f3eff7 !important;
  background: transparent !important;
}
html.st-v2 #st-navigation .st-native-nav-chevron { opacity: .7; transition: transform .35s var(--v2-ease) !important; }
html.st-v2 #st-navigation .st-native-nav-group:hover .st-native-nav-chevron { transform: rotate(180deg); }

/* ---------- 3. mega menu (desktop), finder, stars, avatar ---------- */

.st-v2-menu-label, .st-v2-menu-sub, .st-v2-menu-arrow { display: none; }
@media (min-width: 1101px) and (hover: hover) {
  html.st-v2 #st-navigation .st-native-nav-dropdown {
    position: fixed !important;
    top: 64px !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    transform: none !important;
    display: grid !important;
    grid-template-columns: minmax(200px, 280px) repeat(3, minmax(0, 1fr));
    gap: 16px !important;
    padding: 32px 32px 36px !important;
    background: #0c0911 !important;
    border: 0 !important;
    border-bottom: 1px solid #211a2a !important;
    border-radius: 0 !important;
    box-shadow: 0 40px 80px rgba(0, 0, 0, .5) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  html.st-v2 #st-navigation .st-native-nav-dropdown > .tab {
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 20px !important;
    border: 1px solid transparent !important;
    border-radius: 14px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #f3eff7 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    white-space: normal !important;
    text-align: left !important;
  }
  html.st-v2 #st-navigation .st-native-nav-dropdown > .tab:hover,
  html.st-v2 #st-navigation .st-native-nav-dropdown > .tab:focus-visible {
    background: #16111d !important;
    border-color: #2b2336 !important;
  }
  html.st-v2 #st-navigation .st-native-nav-dropdown > .tab.active { border-color: #211a2a !important; background: #120e18 !important; }
  html.st-v2 #st-navigation .st-native-nav-icon.st-mi-holder,
  html.st-v2 #st-navigation .st-native-nav-dropdown .st-native-nav-icon {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
    margin: 0 0 6px !important;
    color: #f3eff7 !important;
    opacity: 1 !important;
  }
  html.st-v2 #st-navigation .st-native-nav-icon svg.st-mi { width: 40px !important; height: 40px !important; stroke-width: 1.5 !important; }
  .st-v2-menu-label { display: block; padding: 20px 0 0; }
  .st-v2-menu-label b { display: block; font: 500 11px/1 var(--v2-mono); letter-spacing: .18em; color: #6f6780; text-transform: uppercase; }
  .st-v2-menu-label span { display: block; margin-top: 12px; font-size: 15px; color: #a9a1b5; }
  .st-v2-menu-sub { display: block; font-size: 13px; font-weight: 400; color: #8e869b; margin-top: -8px; }
  .st-v2-menu-arrow { display: block; position: absolute; right: 20px; top: 22px; color: #6f6780; opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .3s var(--v2-ease); }
  html.st-v2 #st-navigation .st-native-nav-dropdown > .tab { position: relative !important; }
  html.st-v2 #st-navigation .st-native-nav-dropdown > .tab:hover .st-v2-menu-arrow { opacity: 1; transform: none; }
}
html.st-v2 #st-navigation .st-native-nav-icon { color: #a9a1b5 !important; opacity: 1 !important; }
html.st-v2 svg.st-mi .st-mi-acc { stroke: #c4a3f2 !important; }

/* finder button + palette */
.st-v2-find {
  height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid #211a2a;
  border-radius: 10px;
  background: transparent;
  color: #8e869b;
  font: 500 13px/1 "Plus Jakarta Sans", system-ui, sans-serif;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.st-v2-find:hover { background: #16111d; color: #f3eff7; border-color: #2b2336; }
.st-v2-find kbd { margin-left: 22px; font: 400 11px/1 var(--v2-mono, monospace); color: #6f6780; }
@media (max-width: 1100px) { .st-v2-find { display: none; } }

.st-v2-pal-back {
  position: fixed; inset: 0; z-index: 10070;
  display: flex; justify-content: center; align-items: flex-start;
  padding-top: 14vh;
  background: rgba(5, 5, 7, .72);
  animation: v2-fade .25s ease both;
}
.st-v2-pal {
  width: min(560px, calc(100vw - 32px));
  border: 1px solid #211a2a;
  border-radius: 16px;
  background: #120e18;
  box-shadow: 0 40px 120px rgba(0, 0, 0, .6);
  overflow: hidden;
  animation: v2-pal-in .4s var(--v2-ease) both;
}
.st-v2-pal input {
  width: 100%; box-sizing: border-box;
  height: 56px; padding: 0 20px;
  border: 0; border-bottom: 1px solid #211a2a;
  background: transparent; color: #f3eff7;
  font: 500 16px "Plus Jakarta Sans", system-ui, sans-serif; outline: none;
}
.st-v2-pal ul { list-style: none; margin: 0; padding: 8px; max-height: 60vh; overflow: auto; }
.st-v2-pal a {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 12px; border-radius: 10px;
  color: #f3eff7; text-decoration: none;
}
.st-v2-pal a.is-on, .st-v2-pal a:hover { background: #1b1523; }
.st-v2-pal a svg.st-mi { width: 28px; height: 28px; flex: none; stroke-width: 2.4; color: #f3eff7; }
.st-v2-pal a span { display: flex; flex-direction: column; gap: 2px; }
.st-v2-pal a small { font-size: 12px; color: #8e869b; }
.st-v2-pal .st-v2-pal-sec { margin-left: auto; font: 400 11px/1 var(--v2-mono, monospace); color: #6f6780; letter-spacing: .1em; text-transform: uppercase; }
html .st-v2-pal a.is-on svg.st-mi [class*="mi-"], html .st-v2-pal a:hover svg.st-mi [class*="mi-"] { animation-play-state: running; }
@keyframes v2-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes v2-pal-in { from { opacity: 0; transform: translateY(-8px) scale(.97); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

/* stars + avatar */
html.st-v2 #st-navigation .membership-stars-chip {
  min-height: 0 !important;
  height: 36px;
  padding: 0 4px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #f3eff7 !important;
  font-family: var(--v2-mono) !important;
  font-size: 13px !important;
}
html.st-v2 #st-navigation .membership-stars-chip * { text-shadow: none !important; box-shadow: none !important; }
html.st-v2 #st-navigation .membership-stars-chip strong { color: #f3eff7 !important; font-weight: 500 !important; }
html.st-v2 #st-navigation .membership-stars-chip .stars-symbol { color: #8e869b !important; filter: none !important; }
html.st-v2 #st-navigation .membership-stars-chip .membership-stars-plan {
  color: #6f6780 !important; background: transparent !important; border: 0 !important; padding: 0 !important;
}
html.st-v2 #st-navigation .user-avatar-btn {
  width: 32px !important; height: 32px !important; min-width: 32px !important;
  border: 1px solid #2b2336 !important;
  background: #211a2a !important;
  box-shadow: none !important;
}
html.st-v2 #st-navigation .user-menu-dropdown {
  background: #120e18 !important;
  border: 1px solid #211a2a !important;
  border-radius: 14px !important;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .5) !important;
}
html.st-v2 #st-navigation .user-menu-item:hover { background: #1b1523 !important; }

/* mobile menu panel: neutral colours instead of the old green */
@media (max-width: 1100px) {
  html.st-v2 body #st-navigation.site-header > .topbar { min-height: 64px !important; padding: 8px 16px !important; }
  html.st-v2 #st-navigation .nav-toggle {
    background: #16111d !important;
    border: 1px solid #2b2336 !important;
    box-shadow: none !important;
  }
  html.st-v2 #st-navigation .tabs-island {
    background: #120e18 !important;
    border: 1px solid #211a2a !important;
    box-shadow: 0 24px 48px rgba(0, 0, 0, .5) !important;
  }
  html.st-v2 #st-navigation .tabs { background: transparent !important; border: 0 !important; box-shadow: none !important; }
  html.st-v2 #st-navigation .tabs .tab,
  html.st-v2 #st-navigation .st-native-nav-trigger {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: #a9a1b5 !important;
  }
  html.st-v2 #st-navigation .tabs .tab.active { background: #1b1523 !important; color: #f3eff7 !important; }
  html.st-v2 #st-navigation .st-native-nav-dropdown { background: transparent !important; border: 0 !important; box-shadow: none !important; }
}

/* ---------- 4. shared pieces ---------- */

html.st-v2 #st-page-content :is(h1, h2, h3) {
  color: #f3eff7;
  letter-spacing: -.03em;
  text-shadow: none !important;
}
html.st-v2 #st-page-content h1 { font-weight: 600 !important; }

/* eyebrows / small caps labels -> mono */
html.st-v2 #st-page-content :is(.st-eyebrow, .eyebrow, .kicker, .section-kicker, [class$="-eyebrow"], [class*="-eyebrow "]) {
  font-family: var(--v2-mono) !important;
  font-weight: 500 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;
  color: #8e869b !important;
}

/* gradient text used for emphasis -> solid lavender */
html.st-v2 #st-page-content :is(h1, h2) :is(em, span[class*="grad"], span[class*="accent"]) {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: #c4a3f2 !important;
}

/* inputs */
html.st-v2 #st-page-content :is(input[type="text"], input[type="search"], input[type="email"], input[type="number"], input[type="password"], input[type="url"], input:not([type]), textarea, select) {
  background-color: #0c0911 !important;
  border-color: #2b2336 !important;
  color: #f3eff7 !important;
  box-shadow: none !important;
}
html.st-v2 #st-page-content :is(input, textarea, select):focus {
  border-color: #c4a3f2 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(196, 163, 242, .14) !important;
}
html.st-v2 #st-page-content ::placeholder { color: #6f6780 !important; }

/* generic surfaces: any card / panel / sidebar in page content becomes a
   flat surface. Media-like elements are excluded so thumbnails and
   background-image previews stay untouched. */
html.st-v2 #st-page-content :is([class*="card"],[class*="Card"],[class*="panel"],[class*="Panel"],aside,[class*="sidebar"],[class*="rail"]):not([class*="thumb"]):not([class*="img"]):not([class*="image"]):not([class*="preview"]):not([class*="icon"]):not([class*="avatar"]):not([class*="logo"]):not([class*="count"]):not(img,svg,canvas,video,button,a,input,select,textarea,span,i,em,strong,small):not(.v2-own *) {
  background-color: rgba(18,14,24,.66) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)) !important;
  border-color: rgba(255,255,255,.07) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* page heroes: flat header strip (title + divider), no glow rings */
html.st-v2 #st-page-content :is([class$="-hero"],[class*="-hero "],[class^="hero"],.hero):not(img,svg,canvas,video):not(.v2-own *) {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid #211a2a !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html.st-v2 #st-page-content :is([class$="-hero"],[class*="-hero "],[class^="hero"],.hero)::before,
html.st-v2 #st-page-content :is([class$="-hero"],[class*="-hero "],[class^="hero"],.hero)::after { display: none !important; }

/* generic secondary buttons */
html.st-v2 #st-page-content :is(button,[role="button"],a[class*="btn"],a[class*="button"],a[class*="download"],a[class*="action"],label[class*="btn"]):not([class*="primary"]):not([class*="cta"]):not([type="submit"]):not(.active):not([aria-pressed="true"]):not([aria-selected="true"]):not([class*="danger"]):not([class*="delete"]):not([class*="thumb"]):not(.v2-own *) {
  background-color: #16111d !important;
  background-image: none !important;
  border-color: #2b2336 !important;
  box-shadow: none !important;
  color: #d8cfe4 !important;
  text-shadow: none !important;
}
html.st-v2 #st-page-content :is(button,[role="button"],a[class*="btn"],a[class*="button"]):not([class*="primary"]):not([class*="cta"]):not([type="submit"]):not(.active):not([aria-pressed="true"]):not([aria-selected="true"]):not([class*="danger"]):not([class*="delete"]):not([class*="thumb"]):not(.v2-own *):hover {
  background-color: #1b1523 !important;
  border-color: #3a3048 !important;
  color: #f3eff7 !important;
}

/* selected states */
html.st-v2 #st-page-content :is(button,[role="button"],a,[class*="tab"],[class*="chip"],[class*="pill"],[class*="filter"]):is(.active,.is-active,.selected,[aria-pressed="true"],[aria-selected="true"],[aria-current="page"]) {
  background-color: #1b1523 !important;
  background-image: none !important;
  border-color: rgba(196, 163, 242, .32) !important;
  box-shadow: none !important;
  color: #f3eff7 !important;
}

/* primary actions: lavender, dark text */
html.st-v2 #st-page-content :is([class*="primary"],[class*="cta"],button[type="submit"],[class*="generate"]):is(button,a,[role="button"]):not(:disabled):not(.v2-own *) {
  background-color: #c4a3f2 !important;
  background-image: none !important;
  border-color: #c4a3f2 !important;
  color: #0c0911 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html.st-v2 #st-page-content :is([class*="primary"],[class*="cta"],button[type="submit"],[class*="generate"]):is(button,a,[role="button"]):not(:disabled):hover {
  background-color: #e2d1fa !important;
  border-color: #e2d1fa !important;
}
html.st-v2 #st-page-content :is([class*="primary"],[class*="cta"],button[type="submit"],[class*="generate"]):is(button,a,[role="button"]):not(:disabled) * { color: inherit !important; }

/* chips / counts / badges: flat */
html.st-v2 #st-page-content :is([class*="badge"],[class*="chip"],[class*="pill"],[class*="count"],[class*="tag"]):not(img,svg) {
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html.st-v2 #st-page-content :is(h1,h2,h3,h4) { background-image: none !important; -webkit-text-fill-color: currentColor !important; }

/* toasts */
html.st-v2 #toastContainer > * {
  background: #16111d !important;
  border: 1px solid #2b2336 !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5) !important;
  color: #f3eff7 !important;
}

/* ---------- 5. per-page sections ---------- */

/* HOME (st-workspace-home) */
html.st-v2 .st-home-identity i { background: #c4a3f2; box-shadow: none; }
html.st-v2 .st-home-identity span { font-family: var(--v2-mono); color: #6f6780; border-color: #211a2a; }

html.st-v2 .st-welcome {
  padding: 56px 0 48px !important;
  border: 0 !important;
  border-bottom: 1px solid #211a2a !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}
html.st-v2 .st-welcome::before,
html.st-v2 .st-welcome::after { display: none !important; }
html.st-v2 .st-welcome h1 {
  font-size: clamp(44px, 5vw, 76px) !important;
  font-weight: 650 !important;
  line-height: 1.02 !important;
  letter-spacing: -.05em !important;
}
html.st-v2 .st-welcome h1 em { color: #c4a3f2 !important; }
html.st-v2 .st-welcome p { color: #8e869b !important; font-size: 16px !important; }

html.st-v2 .st-home-primary,
html.st-v2 #st-page-content .v2-primary {
  background: #c4a3f2 !important;
  border: 1px solid #c4a3f2 !important;
  color: #0c0911 !important;
  box-shadow: none !important;
  border-radius: 10px !important;
  transition: background .2s, transform .2s var(--v2-ease) !important;
}
html.st-v2 .st-home-primary:hover { background: #e2d1fa !important; }
html.st-v2 .st-home-primary:active { transform: scale(.97); }
html.st-v2 .st-home-secondary {
  background: transparent !important;
  border: 1px solid #2b2336 !important;
  color: #f3eff7 !important;
  border-radius: 10px !important;
}
html.st-v2 .st-home-secondary:hover { background: #16111d !important; }

html.st-v2 .st-workflow {
  background: #120e18 !important;
  border: 1px solid #211a2a !important;
  border-radius: 16px !important;
}
html.st-v2 .st-workflow-step { border-color: #211a2a !important; }
html.st-v2 .st-step-icon,
html.st-v2 .st-home-tool-icon {
  background: #16111d !important;
  border: 1px solid #211a2a !important;
  border-radius: 10px !important;
  color: #c4a3f2 !important;
}

html.st-v2 .st-tool-categories {
  background: transparent !important;
  border: 1px solid #211a2a !important;
  border-radius: 10px !important;
}
html.st-v2 .st-tool-categories button[aria-pressed="true"] {
  background: #1b1523 !important;
  border-color: #2b2336 !important;
  color: #f3eff7 !important;
}

html.st-v2 .st-home-tool {
  background: #120e18 !important;
  border: 1px solid #211a2a !important;
  border-radius: 14px !important;
  transform: none !important;
  transition: border-color .25s, background .25s !important;
}
html.st-v2 .st-home-tool:hover {
  background: #16111d !important;
  border-color: #2b2336 !important;
}
html.st-v2 .st-home-tool-icon { color: var(--tool-accent, #c4a3f2) !important; }
html.st-v2 .st-home-tool-copy small {
  font-family: var(--v2-mono);
  text-transform: uppercase;
  letter-spacing: .12em !important;
}
html.st-v2 .st-home-tool-copy p { color: #8e869b !important; }
html.st-v2 .st-home-tool-arrow { transition: transform .3s var(--v2-ease), color .2s; }
html.st-v2 .st-home-tool:hover .st-home-tool-arrow { transform: translate(2px, -2px); color: #f3eff7; }

/* LIBRARY (library.html: #libraryPageRoot, .st-v4-*, .library-clean-*) */
html.st-v2 #libraryPageRoot .library-search-wrap,
html.st-v2 #libraryPageRoot .library-clean-view { background: transparent !important; border-color: #211a2a !important; box-shadow: none !important; }
html.st-v2 #libraryPageRoot :is(.library-search, .library-clean-select) {
  background: #0c0911 !important;
  border: 1px solid #211a2a !important;
  box-shadow: none !important;
}
html.st-v2 #libraryPageRoot .st-v4-rail-logo {
  background: #16111d !important;
  border-color: #211a2a !important;
  color: #c4a3f2 !important;
}
html.st-v2 #libraryPageRoot .st-v4-rail-button { color: #a9a1b5 !important; border-color: transparent !important; box-shadow: none !important; }
html.st-v2 #libraryPageRoot .st-v4-rail-button.active {
  background: #1b1523 !important;
  border-color: #2b2336 !important;
  box-shadow: inset 2px 0 0 #c4a3f2 !important;
  color: #f3eff7 !important;
}
html.st-v2 #libraryPageRoot :is(.st-v4-count, [class*="count"]) {
  background: #1b1523 !important;
  border-color: #2b2336 !important;
  color: #a9a1b5 !important;
}
html.st-v2 #libraryPageRoot .card {
  background: #120e18 !important;
  border: 1px solid #211a2a !important;
  border-radius: 14px !important;
  transition: border-color .25s, background .25s !important;
}
html.st-v2 #libraryPageRoot .card:hover { border-color: #2b2336 !important; background: #140f1a !important; }
html.st-v2 #libraryPageRoot .thumb-row { background: #0e0a13 !important; border-color: #1a1421 !important; }
html.st-v2 #libraryPageRoot .thumb-row img { border-color: transparent !important; }
html.st-v2 #libraryPageRoot .library-clean-name { background: transparent !important; color: #f3eff7 !important; }
html.st-v2 #libraryPageRoot .thumb-3d-btn {
  background: rgba(12, 9, 17, .82) !important;
  border: 1px solid #2b2336 !important;
  color: #f3eff7 !important;
  font-family: var(--v2-mono);
}
html.st-v2 #libraryPageRoot .thumb-3d-btn :is(svg, span) { color: #c4a3f2 !important; }
html.st-v2 #libraryPageRoot .library-clean-upload {
  background: transparent !important;
  border: 1px solid #2b2336 !important;
  color: #f3eff7 !important;
}

/* shared: old ".btn.purple" primary buttons -> flat lavender */
html.st-v2 #st-page-content .btn.purple:not(:disabled) {
  background: #c4a3f2 !important;
  border-color: #c4a3f2 !important;
  color: #0c0911 !important;
  box-shadow: none !important;
}
html.st-v2 #st-page-content .btn.purple:not(:disabled):hover { background: #e2d1fa !important; }
html.st-v2 #st-page-content summary { border-color: #211a2a !important; }

/* 3D MAKER (upload.html) */
html.st-v2 #st-page-content .maker-card { border-color: #211a2a !important; }
html.st-v2 #st-page-content #dropzone {
  background: #0e0a13 !important;
  background-image: none !important;
  border: 1px dashed #2b2336 !important;
  transition: border-color .25s, background-color .25s;
}
html.st-v2 #st-page-content #dropzone:hover,
html.st-v2 #st-page-content #dropzone:is(.dragover, .drag-over, .is-dragover, .dragging) {
  border-color: rgba(196, 163, 242, .5) !important;
  background-color: #120e18 !important;
}
html.st-v2 #st-page-content .drop-upload-icon {
  background: #16111d !important;
  border-color: #2b2336 !important;
  box-shadow: none !important;
  color: #c4a3f2 !important;
}
html.st-v2 #st-page-content .maker-step-number {
  background: transparent !important;
  border-color: #2b2336 !important;
  color: #8e869b !important;
  font-family: var(--v2-mono);
}
html.st-v2 #st-page-content .maker-format-content {
  background: #0e0a13 !important;
  background-image: none !important;
  border-color: #211a2a !important;
  box-shadow: none !important;
}
html.st-v2 #st-page-content .st-format-option:hover .maker-format-content { border-color: #2b2336 !important; }
html.st-v2 #st-page-content .st-format-option input:checked + .maker-format-content,
html.st-v2 #st-page-content .st-format-option input:checked ~ .maker-format-content {
  background: #1b1523 !important;
  border-color: rgba(196, 163, 242, .45) !important;
}
html.st-v2 #st-page-content input:not(:checked) + .toggle-track,
html.st-v2 #st-page-content label:has(input:not(:checked)) .toggle-track { background: #1b1523 !important; border-color: #2b2336 !important; }
html.st-v2 #st-page-content .st-url-paste-btn { background: #16111d !important; border-color: #2b2336 !important; }
html.st-v2 #st-page-content .st-native-size-control { background: #0c0911 !important; border-color: #2b2336 !important; }
html.st-v2 #st-page-content .choose-file-btn {
  background: #c4a3f2 !important;
  color: #0c0911 !important;
  font-weight: 700 !important;
}
html.st-v2 #st-page-content .st-format-option span:not(.maker-format-content) { color: #8e869b !important; }
html.st-v2 #st-page-content .st-format-option:hover span:not(.maker-format-content) { background: #16111d !important; color: #f3eff7 !important; }
html.st-v2 #st-page-content .st-format-option input:checked + span:not(.maker-format-content) {
  background: #1b1523 !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 1px rgba(196, 163, 242, .45) !important;
  color: #f3eff7 !important;
}
html.st-v2 #st-page-content .st-generate-cost { background: transparent !important; font-family: var(--v2-mono); }

/* MODEL EDITOR */
html.st-v2 #st-page-content .me-btn.primary:disabled {
  background: #16111d !important;
  border-color: #211a2a !important;
  color: #6f6780 !important;
}
html.st-v2 #st-page-content .me-tool.active {
  background: #1b1523 !important;
  border-color: rgba(196, 163, 242, .32) !important;
  color: #f3eff7 !important;
}
html.st-v2 #st-page-content .me-empty-icon {
  background: #16111d !important;
  border-color: #2b2336 !important;
  color: #c4a3f2 !important;
}
html.st-v2 #st-page-content #meLookDockButton { border-color: #2b2336 !important; }

/* AI CHAT (design.html) */
html.st-v2 #st-page-content .composer {
  background: #120e18 !important;
  background-image: none !important;
  border-color: #2b2336 !important;
  box-shadow: none !important;
}
html.st-v2 #st-page-content .composer:focus-within { border-color: rgba(196, 163, 242, .45) !important; }
html.st-v2 #st-page-content :is(.composer-footer, .chat-options, .composer-new-chat) { border-color: #211a2a !important; }
html.st-v2 #st-page-content .chat-orbit {
  background: #16111d !important;
  background-image: none !important;
  border: 1px solid #211a2a !important;
  box-shadow: none !important;
}
html.st-v2 #st-page-content .chat-orbit::before,
html.st-v2 #st-page-content .chat-orbit::after { display: none !important; }
html.st-v2 #st-page-content #promptInput { background: transparent !important; border-color: transparent !important; }

/* MODEL LIBRARY (stl_library.html): card actions as quiet outline buttons */
html.st-v2 #st-page-content .ml-btn.primary:not(:disabled) {
  background: transparent !important;
  border: 1px solid rgba(196, 163, 242, .32) !important;
  color: #c4a3f2 !important;
}
html.st-v2 #st-page-content .ml-btn.primary:not(:disabled):hover {
  background: rgba(196, 163, 242, .10) !important;
  border-color: #c4a3f2 !important;
}
html.st-v2 #st-page-content .ml-group-count-badge { border-color: #2b2336 !important; }

/* TELEGRAM ARCHIVE */
html.st-v2 #st-page-content :is(.tgcompact-metric, #tgWorkerControl) {
  background: #120e18 !important;
  background-image: none !important;
  border-color: #211a2a !important;
  box-shadow: none !important;
}
html.st-v2 #st-page-content .tgcompact-metric :is(strong, b, [class*="value"]) { font-variant-numeric: tabular-nums; }
html.st-v2 #st-page-content :is(.telegram-icon, .telegram-panel-title-icon, .st-help) {
  background: #16111d !important;
  border-color: #2b2336 !important;
  box-shadow: none !important;
}
html.st-v2 #st-page-content :is(.telegram-channel-head, .telegram-channel-row) { border-color: #211a2a !important; }
html.st-v2 #st-page-content .tgcompact-add { box-shadow: none !important; }
html.st-v2 #st-page-content .tgcompact-menu-popover {
  background: #120e18 !important;
  border-color: #2b2336 !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5) !important;
}

/* STICKER STUDIO */
html.st-v2 #st-page-content .ss-pool {
  background: #120e18 !important;
  background-image: none !important;
  border-color: #211a2a !important;
  box-shadow: none !important;
}
html.st-v2 #st-page-content .ss-info { border-color: #211a2a !important; }

/* MEMBERSHIP + PROFILE */
html.st-v2 #st-page-content .membership-current-strip {
  background: #120e18 !important;
  background-image: none !important;
  border-color: #211a2a !important;
}
html.st-v2 #st-page-content .plan-card { box-shadow: none !important; }
html.st-v2 #st-page-content .plan-card.is-popular { border-color: rgba(196, 163, 242, .45) !important; }
html.st-v2 #st-page-content .plan-popular-badge {
  background: rgba(196, 163, 242, .10) !important;
  border-color: rgba(196, 163, 242, .32) !important;
  color: #c4a3f2 !important;
  font-family: var(--v2-mono);
}
html.st-v2 #st-page-content .num {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: #f3eff7 !important;
  font-variant-numeric: tabular-nums;
}
html.st-v2 #st-page-content .membership-plan-row { background: #16111d !important; border-color: #2b2336 !important; }
html.st-v2 #st-page-content .card { border-color: #211a2a !important; }

/* ---------- 6. v2 components (rebuilt templates: _v2.html macros) ---------- */

@media (max-width: 1100px) { .st-v2-ind { display: none !important; } }

html.st-v2 #st-page-content:has(.v2-page) { padding-top: 0 !important; }
.v2-page {
  width: min(1296px, calc(100% - 64px));
  margin: 0 auto;
  padding: 36px 0 96px;
  color: #f3eff7;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}
.v2-page *, .v2-page *::before, .v2-page *::after { box-sizing: border-box; }
.v2-mono, .v2-crumb, .v2-eyebrow { font-family: var(--v2-mono); }
.v2-crumb { font-size: 11px; letter-spacing: .18em; color: #5d5569; text-transform: uppercase; }
.v2-eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; letter-spacing: .18em; color: #8e869b; text-transform: uppercase;
}
.v2-eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--tone, #c4a3f2); }

/* buttons */
.v2-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.v2-btn {
  height: 48px; display: inline-flex; align-items: center; gap: 10px;
  padding: 0 22px; border-radius: 12px;
  border: 1px solid #2b2336; background: transparent;
  color: #f3eff7 !important; font-size: 15px; font-weight: 600; text-decoration: none;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s var(--v2-ease);
}
.v2-btn:hover { background: #16111d; border-color: #3a3048; }
.v2-btn:active { transform: scale(.97); }
.v2-btn-primary { background: #c4a3f2; border-color: #c4a3f2; color: #120c18 !important; font-weight: 700; }
.v2-btn-primary:hover { background: #e2d1fa; border-color: #e2d1fa; }
.v2-btn svg { transition: transform .3s var(--v2-ease); }
.v2-btn:hover svg { transform: translateX(3px); }

/* tool page header */
.v2-head { display: flex; flex-direction: column; gap: 22px; padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid #211a2a; }
.v2-head-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.v2-head-tile {
  width: 88px; height: 88px; flex: none;
  display: grid; place-items: center;
  border: 1px solid #211a2a; border-radius: 22px;
  color: #f3eff7;
  --icbg: #0c0911;
}
.v2-head-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
html.st-v2 .v2-page h1.v2-title,
.v2-title { margin: 0; font-family: "Plus Jakarta Sans", system-ui, sans-serif !important; font-size: 40px !important; font-weight: 600 !important; line-height: 1.05 !important; letter-spacing: -.035em !important; color: #f3eff7; }
.v2-sub { margin: 0; font-size: 16px; color: #8e869b; }
.v2-head-meta { font: 400 13px/1 var(--v2-mono); color: #8e869b; }
.v2-head-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
html .v2-head svg.st-mi [class*="mi-"] { animation-play-state: running; }
svg.v2-ic .mi-lb-fold { fill: var(--icbg, #0c0911); }

/* sections */
.v2-section { padding: 88px 0 0; margin-top: 88px; border-top: 1px solid #211a2a; }
.v2-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.v2-section-head > div { display: flex; flex-direction: column; gap: 16px; }
.v2-h2 { margin: 0; font-size: clamp(30px, 3.2vw, 44px); font-weight: 600; line-height: 1.05; letter-spacing: -.035em; }
.v2-lead { margin: 0; max-width: 420px; font-size: 17px; line-height: 1.6; color: #8e869b; }
.v2-link { color: #c4a3f2 !important; font-weight: 600; text-decoration: none; }
.v2-link:hover { color: #e2d1fa !important; }

/* HOME hero */
.v2-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 48px; min-height: min(640px, calc(100vh - 160px)); padding: 24px 0 8px; }
.v2-hero-copy { display: flex; flex-direction: column; gap: 26px; }
html.st-v2 .v2-page h1.v2-hero-title,
.v2-hero-title { margin: 0; font-family: "Plus Jakarta Sans", system-ui, sans-serif !important; font-size: clamp(52px, 6vw, 84px) !important; line-height: 1 !important; font-weight: 600 !important; letter-spacing: -.045em !important; color: #f3eff7; }
.v2-hero-title span { color: #8e869b; }
.v2-hero-sub { margin: 0; max-width: 460px; font-size: 18px; line-height: 1.6; color: #8e869b; }
.v2-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.v2-chips span { padding: 7px 10px; border: 1px solid #211a2a; border-radius: 8px; font: 400 11px/1 var(--v2-mono); letter-spacing: .08em; color: #8e869b; text-transform: uppercase; }

.v2-hero-visual { position: relative; justify-self: end; width: min(100%, 560px); aspect-ratio: 1; }
.v2-hero-stage { position: absolute; inset: 0; display: grid; place-items: center; }
.v2-hero-stage::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: 13%; height: 1px; background: linear-gradient(90deg, transparent, #2b2336, transparent); }
.v2-hero-still, .v2-hero-canvas { width: 100%; height: 100%; object-fit: contain; }
.v2-hero-stage.is-live .v2-hero-still { display: none; }
.v2-hero-card {
  position: absolute; z-index: 2;
  padding: 12px 14px; border: 1px solid #211a2a; border-radius: 12px;
  background: rgba(17, 16, 21, .88);
  font: 400 12px/1.6 var(--v2-mono); color: #8e869b;
}
.v2-hero-card b { color: #f3eff7; font-weight: 500; }
.v2-hero-card-a { right: 2%; top: 12%; }
.v2-hero-card-a strong { display: block; font: 500 22px/1.2 var(--v2-mono); color: #ff7a2e; }
.v2-hero-card-a strong em { font-style: normal; color: #6f6780; }
.v2-hero-card-b { left: -2%; bottom: 20%; }
.v2-ok { color: #7ee0a8; }

/* stats strip */
.v2-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 40px; border: 1px solid #211a2a; border-radius: 16px; overflow: hidden; }
.v2-stat { padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.v2-stat + .v2-stat { border-left: 1px solid #211a2a; }
.v2-stat strong { font: 500 28px/1 var(--v2-mono); color: #f3eff7; font-variant-numeric: tabular-nums; }
.v2-stat span { font-size: 13px; color: #8e869b; }

/* five stations */
.v2-flow { position: relative; margin-top: 64px; }
.v2-flow-rail, .v2-flow-fill { position: absolute; left: 7px; right: 0; top: 7px; height: 2px; }
.v2-flow-rail { background: #211a2a; }
.v2-flow-fill { background: linear-gradient(90deg, #c4a3f2, #ff7a2e); transform-origin: left; animation: v2-railfill 8s linear infinite; }
.v2-flow-dot { position: absolute; top: 0; width: 16px; height: 16px; margin-left: -1px; border-radius: 50%; background: #ff7a2e; box-shadow: 0 0 22px 6px rgba(255, 122, 46, .45); animation: v2-travel 8s linear infinite; }
.v2-flow-grid { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.v2-station { display: flex; flex-direction: column; gap: 12px; color: #f3eff7 !important; text-decoration: none; }
.v2-node { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #3a3048; background: #16111d; animation: v2-node 8s linear infinite; }
.v2-station:nth-child(2) .v2-node { animation-name: v2-node2; }
.v2-station:nth-child(3) .v2-node { animation-name: v2-node3; }
.v2-station:nth-child(4) .v2-node { animation-name: v2-node4; }
.v2-station:nth-child(5) .v2-node { animation-name: v2-node5; }
.v2-station-n { margin-top: 14px; font: 400 13px/1 var(--v2-mono); color: #ff7a2e; }
.v2-station-t { font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.v2-station-s { font-size: 15px; line-height: 1.5; color: #8e869b; }
.v2-station:hover .v2-station-t { color: #c4a3f2; }
@keyframes v2-railfill { 0% { transform: scaleX(0); } 90% { transform: scaleX(1); } 96% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes v2-travel { 0% { left: 0%; } 90%, 100% { left: 100%; } }
@keyframes v2-node  { 0% { border-color: #3a3048; background: #16111d; } 1%, 96% { border-color: #ff7a2e; background: #ff7a2e; } 100% { border-color: #3a3048; background: #16111d; } }
@keyframes v2-node2 { 0%, 18% { border-color: #3a3048; background: #16111d; } 19%, 96% { border-color: #ff7a2e; background: #ff7a2e; } 100% { border-color: #3a3048; background: #16111d; } }
@keyframes v2-node3 { 0%, 36% { border-color: #3a3048; background: #16111d; } 37%, 96% { border-color: #ff7a2e; background: #ff7a2e; } 100% { border-color: #3a3048; background: #16111d; } }
@keyframes v2-node4 { 0%, 54% { border-color: #3a3048; background: #16111d; } 55%, 96% { border-color: #ff7a2e; background: #ff7a2e; } 100% { border-color: #3a3048; background: #16111d; } }
@keyframes v2-node5 { 0%, 72% { border-color: #3a3048; background: #16111d; } 73%, 96% { border-color: #ff7a2e; background: #ff7a2e; } 100% { border-color: #3a3048; background: #16111d; } }

/* model shelf */
.v2-shelf { position: relative; margin-top: 48px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); overflow: hidden; }
.v2-shelf-track { display: flex; gap: 20px; width: max-content; }
.v2-shelf-track.is-moving { animation: v2-marquee 48s linear infinite; }
.v2-shelf:hover .v2-shelf-track { animation-play-state: paused; }
.v2-model {
  width: 240px; flex: none;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 10px 10px 14px;
  border: 1px solid #211a2a; border-radius: 20px;
  background: radial-gradient(circle at 50% 38%, #18141f, #0f0d13 70%);
  color: #a9a1b5 !important; text-decoration: none;
  transition: border-color .25s, transform .3s var(--v2-ease);
}
.v2-model:hover { border-color: #2b2336; transform: translateY(-3px); }
.v2-model-img { width: 100%; height: 170px; display: grid; place-items: center; color: #3a3048; }
.v2-model-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.v2-model span { max-width: 100%; font: 400 12px/1.3 var(--v2-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-empty { margin-top: 40px; padding: 36px; border: 1px dashed #2b2336; border-radius: 16px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; color: #8e869b; }
@keyframes v2-marquee { to { transform: translateX(-50%); } }

/* ecosystem rows */
.v2-eco { margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.v2-eco-col { display: flex; flex-direction: column; gap: 14px; }
.v2-eco-label { display: flex; align-items: center; gap: 10px; font: 400 12px/1 var(--v2-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tone); }
.v2-eco-label i { width: 8px; height: 8px; border-radius: 50%; background: var(--tone); }
.v2-eco-label small { color: #6f6780; letter-spacing: .04em; font-size: 12px; text-transform: none; }
.v2-row {
  display: flex; align-items: center; gap: 18px;
  padding: 20px; border-radius: 18px;
  border: 1px solid #211a2a; background: #120e18;
  color: #f3eff7 !important; text-decoration: none;
  transition: border-color .25s, background .25s;
}
.v2-row:hover { border-color: #2b2336; background: #16111d; }
.v2-row-ic { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border: 1px solid #211a2a; border-radius: 12px; color: var(--tone, #c4a3f2); --icbg: #120e18; }
.v2-row-text { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.v2-row-title { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.v2-row-sub { font-size: 14px; color: #8e869b; }
.v2-row-arrow { color: #6f6780; transition: transform .3s var(--v2-ease), color .2s; }
.v2-row:hover .v2-row-arrow { color: #f3eff7; transform: translate(2px, -2px); }
html .v2-hover:hover svg.st-mi [class*="mi-"] { animation-play-state: running; }

/* entrance */
@media (prefers-reduced-motion: no-preference) {
  .v2-rise > * { animation: v2-rise .7s var(--v2-ease) both; }
  .v2-rise > *:nth-child(2) { animation-delay: .06s; }
  .v2-rise > *:nth-child(3) { animation-delay: .12s; }
  .v2-rise > *:nth-child(4) { animation-delay: .18s; }
  .v2-rise > *:nth-child(5) { animation-delay: .24s; }
  .v2-rise > *:nth-child(6) { animation-delay: .3s; }
}
@media (prefers-reduced-motion: reduce) {
  .v2-flow-fill, .v2-flow-dot, .v2-node, .v2-shelf-track { animation: none !important; }
  .v2-flow-dot { display: none; }
}

@media (max-width: 1000px) {
  .v2-page { width: calc(100% - 32px); padding-top: 24px; }
  .v2-hero { grid-template-columns: 1fr; min-height: 0; gap: 16px; }
  .v2-hero-visual { justify-self: center; width: min(100%, 420px); }
  .v2-hero-card-a { right: 0; top: 4%; }
  .v2-hero-card-b { bottom: 12%; }
}
@media (max-width: 600px) {
  .v2-hero-card-b { display: none; }
  .v2-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-stat:nth-child(3) { border-left: 0; }
  .v2-stat:nth-child(n+3) { border-top: 1px solid #211a2a; }
  .v2-flow-rail, .v2-flow-fill, .v2-flow-dot { display: none; }
  .v2-flow-grid { grid-template-columns: 1fr; gap: 0; }
  .v2-station { flex-direction: row; align-items: baseline; gap: 14px; padding: 16px 0; border-top: 1px solid #211a2a; }
  .v2-node { display: none; }
  .v2-station-n { margin: 0; }
  .v2-station-t { font-size: 20px; }
  .v2-eco { grid-template-columns: 1fr; }
  .v2-section { padding-top: 56px; margin-top: 56px; }
  .v2-title { font-size: 30px !important; }
  .v2-head-tile { width: 64px; height: 64px; border-radius: 16px; }
  .v2-head-tile svg { width: 40px; height: 40px; }
}



/* ---------- 7. tool pages: v2 header replaces the old ones ---------- */

/* each old heading is hidden only when the new v2 head was inserted on that page */
html.st-v2 .maker-page:has(> .v2-head) > .maker-header,
html.st-v2 #libraryPageRoot:has(> .v2-head) > .page-blob,
html.st-v2 #libraryPageRoot:has(> .v2-head) > p.subtitle,
html.st-v2 .model-library:has(> .v2-head) .ml-hero > .ml-eyebrow,
html.st-v2 .model-library:has(> .v2-head) .ml-hero > h1,
html.st-v2 .model-library:has(> .v2-head) .ml-hero > p,
html.st-v2 .v2-head ~ .telegram-hero > p,
html.st-v2 .v2-head ~ .telegram-hero .telegram-title-row,
html.st-v2 .v2-head ~ .ss-hero > div:first-child,
html.st-v2 .v2-head ~ .ls-heading > .ls-heading-copy,
html.st-v2 .v2-head + p.subtitle { display: none !important; }

html.st-v2 .v2-head ~ .telegram-hero .tg-eyebrow { font-size: 0 !important; margin: 0 0 12px !important; }
html.st-v2 .v2-head ~ .telegram-hero .tg-eyebrow > span:first-child { display: none !important; }
html.st-v2 .v2-head ~ .telegram-hero .tg-updated { font: 400 12px/1 var(--v2-mono) !important; color: #6f6780 !important; margin-left: 0 !important; }
html.st-v2 .model-library:has(> .v2-head) .ml-hero { min-height: 0 !important; padding: 0 !important; border: 0 !important; margin: 0 0 24px !important; }
html.st-v2 .v2-head ~ .ss-hero { justify-content: flex-end !important; min-height: 0 !important; margin: -8px 0 20px !important; padding: 0 !important; border: 0 !important; }
html.st-v2 .v2-head ~ .ls-heading { justify-content: flex-end !important; margin: -8px 0 20px !important; }

/* page headers sit inside each page's own container */
html.st-v2 .v2-head { width: 100%; }
html.st-v2 .model-library > .v2-head,
html.st-v2 #libraryPageRoot > .v2-head,
html.st-v2 .maker-page > .v2-head { margin-top: 8px; }

/* shared surface language for the tool bodies (boards: flat panels, hairlines, mono labels) */
html.st-v2 #st-page-content :is(.maker-card, .ss-pool, .ss-card, .ls-panel, .telegram-panel, .ml-org-panel, .library-upload-panel, .settings-grid > .card, .card) {
  border-radius: 16px !important;
}
html.st-v2 #st-page-content :is(label, .field-label, .setting-label, [class$="-label"]):not(.v2-own *):not(.st-format-option):not(.library-choose-btn):not([class*="btn"]) {
  letter-spacing: .01em;
}
html.st-v2 #st-page-content :is(h2, h3):not(.v2-own *) { letter-spacing: -.02em !important; }

/* Model Editor: workspace page; identity line becomes the mono crumb */
html.st-v2 .me-page-identity {
  font: 400 11px/1 var(--v2-mono) !important;
  letter-spacing: .18em !important;
  text-transform: uppercase;
  color: #5d5569 !important;
}
html.st-v2 .me-page-identity span[aria-hidden] { color: #c4a3f2 !important; }
html.st-v2 .me-page-identity small { color: #5d5569 !important; letter-spacing: .18em !important; }
html.st-v2 .me-topbar { background: #0c0911 !important; border: 1px solid #211a2a !important; border-radius: 16px !important; box-shadow: none !important; }

/* Etsy Convert + Membership keep their big titles, in the Proto type */
html.st-v2 #st-page-content :is(.membership-hero h1, .etsy-hero h1, section[class*="hero"] > h1):not(.v2-own *) {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-size: clamp(40px, 4.4vw, 60px) !important;
  font-weight: 600 !important;
  line-height: 1.02 !important;
  letter-spacing: -.045em !important;
}
html.st-v2 #st-page-content :is(.membership-hero h1 span, section[class*="hero"] > h1 span) { color: #8e869b !important; background: none !important; -webkit-text-fill-color: currentColor !important; }
html.st-v2 #st-page-content :is(.membership-kicker, .etsy-kicker, [class*="hero"] [class*="kicker"]) {
  font-family: var(--v2-mono) !important; font-weight: 400 !important; letter-spacing: .18em !important; color: #8e869b !important;
}

/* staggered entrance for home blocks */
@media (prefers-reduced-motion: no-preference) {
  html.st-v2 .st-workspace-home > * { animation: v2-rise .6s var(--v2-ease) both; }
  html.st-v2 .st-workspace-home > *:nth-child(2) { animation-delay: .06s; }
  html.st-v2 .st-workspace-home > *:nth-child(3) { animation-delay: .12s; }
  html.st-v2 .st-workspace-home > *:nth-child(4) { animation-delay: .18s; }
  html.st-v2 .st-workspace-home > *:nth-child(5) { animation-delay: .24s; }
  html.st-v2 .st-home-tool-grid > .st-home-tool { animation: v2-rise .5s var(--v2-ease) both; }
  html.st-v2 .st-home-tool-grid > .st-home-tool:nth-child(3n+2) { animation-delay: .05s; }
  html.st-v2 .st-home-tool-grid > .st-home-tool:nth-child(3n) { animation-delay: .1s; }
}
@keyframes v2-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.st-v2-pal input, .st-v2-pal input:focus { border: 0 !important; border-bottom: 1px solid #211a2a !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important; background: transparent !important; }

/* =====================================================================
   8. LIQUID · TECHNICAL  (v2-5)
   Glass surfaces over a slow liquid backdrop, blueprint grid, mono
   readouts, and the signature motions: liquid tab pill, layer-print
   reveals, magnetic/liquid buttons, scrambled counters.
   ===================================================================== */

/* backdrop: blobs + grid + pointer light (layer injected by motion-v2.js) */
html.st-v2 #st-page-content { position: relative; z-index: 1; }
.v2-liquid { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.v2-liquid i {
  position: absolute; width: 48vw; height: 48vw; min-width: 420px; min-height: 420px;
  border-radius: 43% 57% 62% 38% / 45% 42% 58% 55%;
  filter: blur(90px); opacity: .17; will-change: transform, border-radius;
}
.v2-liquid i:nth-child(1) { background: #8d68e0; left: -12vw; top: -18vw; animation: v2-blob-a 26s ease-in-out infinite alternate; }
.v2-liquid i:nth-child(2) { background: #ff7a2e; right: -18vw; top: 18vh; opacity: .08; animation: v2-blob-b 34s ease-in-out infinite alternate; }
.v2-liquid i:nth-child(3) { background: #3aa0d8; left: 28vw; bottom: -30vw; opacity: .07; animation: v2-blob-c 40s ease-in-out infinite alternate; }
.v2-liquid b {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000, transparent 75%);
}
.v2-liquid u {
  position: absolute; width: 640px; height: 640px;
  left: calc(var(--px, 50vw) - 320px); top: calc(var(--py, 30vh) - 320px);
  background: radial-gradient(circle, rgba(196,163,242,.075), transparent 62%);
  text-decoration: none;
}
body:not([data-st-page="home"]) .v2-liquid i { opacity: .09; }
body:not([data-st-page="home"]) .v2-liquid i:nth-child(n+2) { opacity: .045; }
@keyframes v2-blob-a { 0% { transform: translate(0,0) rotate(0); border-radius: 43% 57% 62% 38% / 45% 42% 58% 55%; } 100% { transform: translate(14vw, 10vh) rotate(40deg); border-radius: 58% 42% 38% 62% / 55% 60% 40% 45%; } }
@keyframes v2-blob-b { 0% { transform: translate(0,0) rotate(0); } 100% { transform: translate(-16vw, 22vh) rotate(-50deg); border-radius: 60% 40% 45% 55% / 40% 58% 42% 60%; } }
@keyframes v2-blob-c { 0% { transform: translate(0,0) rotate(0); } 100% { transform: translate(-10vw, -18vh) rotate(60deg); border-radius: 38% 62% 55% 45% / 58% 38% 62% 42%; } }

/* liquid glass */
.v2-glass {
  position: relative; isolation: isolate;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.012)) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  border: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 18px 44px rgba(0,0,0,.32) !important;
}
.v2-glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 1;
  background: linear-gradient(145deg, rgba(255,255,255,.24), rgba(255,255,255,.04) 38%, rgba(255,255,255,.02) 62%, rgba(196,163,242,.26));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.v2-glass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, -30%), rgba(255,255,255,.10), transparent 62%);
  opacity: 0; transition: opacity .35s ease;
}
.v2-glass:hover::after { opacity: 1; }
.v2-glass > * { position: relative; z-index: 2; }

/* header: glass bar (blur on a pseudo so fixed menus keep the viewport) */
html.st-v2 body #st-navigation.site-header { background: transparent !important; border-bottom-color: rgba(255,255,255,.06) !important; }
html.st-v2 body #st-navigation.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(12,9,17,.62);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
}

/* liquid tab pill (the sliding indicator) */
@media (min-width: 1101px) {
  html.st-v2 .st-v2-ind {
    top: 14px !important; bottom: auto !important; height: 36px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.065) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.05);
    z-index: 0 !important;
    transition: left .62s cubic-bezier(.34,1.42,.5,1), width .62s cubic-bezier(.34,1.42,.5,1), opacity .2s ease !important;
  }
  html.st-v2 .st-v2-ind::after {
    content: ""; position: absolute; left: 50%; bottom: -14px; width: 16px; height: 2px; margin-left: -8px;
    border-radius: 2px; background: #c4a3f2; box-shadow: 0 0 12px rgba(196,163,242,.8);
  }
  html.st-v2 .st-v2-ind.is-stretch { transition: left .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1) !important; }
  html.st-v2 #st-navigation .tabs > .tab,
  html.st-v2 #st-navigation .tabs > .st-native-nav-group > .st-native-nav-trigger { position: relative; z-index: 1; }
}

/* mega menu in glass */
@media (min-width: 1101px) and (hover: hover) {
  html.st-v2 #st-navigation .st-native-nav-dropdown {
    background: rgba(14,10,19,.84) !important;
    -webkit-backdrop-filter: blur(26px) saturate(1.5) !important;
    backdrop-filter: blur(26px) saturate(1.5) !important;
    border-bottom-color: rgba(255,255,255,.06) !important;
    grid-template-columns: 180px repeat(3, minmax(0, 1fr)) !important;
  }
  html.st-v2 #st-navigation .st-native-nav-dropdown > .tab {
    min-height: 132px !important; justify-content: space-between !important;
    border-radius: 20px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)) !important;
    border: 1px solid rgba(255,255,255,.05) !important;
    transition: background .25s, border-color .25s, transform .5s cubic-bezier(.34,1.56,.64,1) !important;
  }
  html.st-v2 #st-navigation .st-native-nav-dropdown > .tab:hover {
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)) !important;
    border-color: rgba(255,255,255,.12) !important;
    transform: translateY(-3px) !important;
  }
  .st-v2-menu-label span { display: none !important; }
  .st-v2-menu-label b { font-size: 12px !important; color: #8e869b !important; }
}

/* buttons: liquid pill, cursor-driven fill, spring press, magnetic */
.v2-btn {
  position: relative; overflow: hidden; isolation: isolate;
  height: 48px; border-radius: 999px !important; padding: 0 24px;
  transform: translate(var(--tx, 0), var(--ty, 0));
  transition: transform .55s cubic-bezier(.34,1.56,.64,1), background .25s, box-shadow .25s !important;
}
.v2-btn::before {
  content: ""; position: absolute; z-index: -1; width: 12px; height: 12px; border-radius: 50%;
  left: var(--mx, 50%); top: var(--my, 50%); transform: translate(-50%, -50%) scale(0);
  background: rgba(255,255,255,.14); transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.v2-btn:hover::before { transform: translate(-50%, -50%) scale(40); }
.v2-btn:active { transform: translate(var(--tx, 0), var(--ty, 0)) scale(.94); transition-duration: .12s !important; }
.v2-btn-primary {
  background: linear-gradient(180deg, #d6bdf8, #b08ae8) !important;
  border: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -3px 8px rgba(70,30,130,.28), 0 12px 32px rgba(176,138,232,.28) !important;
}
.v2-btn-primary::before { background: rgba(255,255,255,.28); }
.v2-btn:not(.v2-btn-primary) {
  background: rgba(255,255,255,.06) !important;
  border: 0 !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(255,255,255,.07) !important;
}
.v2-btn:not(.v2-btn-primary):hover { background: rgba(255,255,255,.09) !important; }

/* technical labels */
.v2-tick { color: #a9a1b5 !important; }
.v2-tick i { width: 6px !important; height: 6px !important; border-radius: 1px !important; background: #ff7a2e !important; box-shadow: 0 0 10px rgba(255,122,46,.8); }
.v2-tick em { font-style: normal; color: #5d5569; }
.v2-label {
  display: flex; align-items: center; gap: 12px; margin-bottom: 26px;
  font: 500 12px/1 var(--v2-mono); letter-spacing: .2em; text-transform: uppercase; color: #f3eff7;
}
.v2-label b { color: #ff7a2e; font-weight: 500; }
.v2-label span { padding: 4px 8px; border-radius: 999px; background: rgba(255,255,255,.06); color: #a9a1b5; letter-spacing: .06em; }
.v2-label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.12), transparent); order: 5; }
.v2-label-link { order: 6; color: #8e869b !important; text-decoration: none; font-size: 16px; letter-spacing: 0; transition: color .2s, transform .35s cubic-bezier(.34,1.56,.64,1); }
.v2-label-link:hover { color: #c4a3f2 !important; transform: translateX(4px); }
.v2-block { margin-top: 110px; }

/* hero */
.v2-hero { min-height: min(700px, calc(100vh - 120px)); padding-top: 36px; }
html.st-v2 .v2-page h1.v2-hero-title,
.v2-hero-title { font-size: clamp(64px, 7.4vw, 112px) !important; letter-spacing: -.055em !important; line-height: .96 !important; }
.v2-hero-title span {
  background: linear-gradient(100deg, #8e869b 0%, #8e869b 40%, #f3eff7 50%, #8e869b 60%, #8e869b 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: v2-sheen 7s ease-in-out infinite;
}
@keyframes v2-sheen { 0%, 55% { background-position: 100% 0; } 85%, 100% { background-position: 0% 0; } }
.v2-hero-copy { gap: 34px !important; }
.v2-readout { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 0; margin: 10px 0 0; }
.v2-readout div { padding: 0 28px; border-left: 1px solid rgba(255,255,255,.08); }
.v2-readout div:first-child { padding-left: 0; border-left: 0; }
.v2-readout dt { font: 400 10px/1 var(--v2-mono); letter-spacing: .2em; text-transform: uppercase; color: #6f6780; }
.v2-readout dd { margin: 10px 0 0; font: 500 28px/1 var(--v2-mono); color: #f3eff7; font-variant-numeric: tabular-nums; }

.v2-hero-visual { width: min(100%, 600px) !important; }
.v2-hero-grid {
  position: absolute; inset: -6%;
  background-image: linear-gradient(rgba(196,163,242,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(196,163,242,.09) 1px, transparent 1px);
  background-size: 28px 28px; background-position: center;
  -webkit-mask-image: radial-gradient(circle at 50% 55%, #000 0%, transparent 62%);
  mask-image: radial-gradient(circle at 50% 55%, #000 0%, transparent 62%);
}
.v2-hero-stage::after { display: none; }
.v2-hud { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.v2-hud path { fill: none; stroke: rgba(238,236,242,.34); stroke-width: 1; vector-effect: non-scaling-stroke; }
.v2-hud .v2-hud-line { stroke: rgba(255,122,46,.7); stroke-dasharray: 3 4; }
.v2-hud-t { font: 500 11px var(--v2-mono, monospace); letter-spacing: .12em; fill: #a9a1b5; }
.v2-hud-dim-t { fill: #6f6780; }
.v2-hud-hot { fill: #ff7a2e; }
@media (prefers-reduced-motion: no-preference) {
  .v2-hud-box path, .v2-hud-dim path, .v2-hud-base path { stroke-dasharray: 600; stroke-dashoffset: 600; animation: v2-draw 1.6s cubic-bezier(.65,0,.35,1) .5s forwards; }
  .v2-hud .v2-hud-line { stroke-dasharray: 3 4; stroke-dashoffset: 0; animation: v2-march 1.2s linear infinite; }
  .v2-hud-t { opacity: 0; animation: v2-fadein .6s ease 1.6s forwards; }
}
@keyframes v2-draw { to { stroke-dashoffset: 0; } }
@keyframes v2-march { to { stroke-dashoffset: -14; } }
@keyframes v2-fadein { to { opacity: 1; } }

/* workflow: numbers + names only */
.v2-flow { margin-top: 8px !important; }
.v2-station-t { font-size: 22px !important; }
.v2-station { gap: 10px !important; }

/* shelf cards in glass */
.v2-model { background: none !important; border-radius: 22px !important; }
.v2-model:hover { transform: translateY(-4px) scale(1.02); }
.v2-empty { justify-content: flex-start !important; gap: 16px !important; border: 0 !important; color: #f3eff7 !important; text-decoration: none; border-radius: 22px !important; font-weight: 600; }

/* tool tiles */
.v2-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.v2-tile {
  height: 168px; padding: 22px; border-radius: 24px !important;
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: 1fr auto;
  color: #f3eff7 !important; text-decoration: none;
  transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .6s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
  --icbg: #16141c;
}
.v2-tile:hover { transition: transform .12s linear, box-shadow .3s; }
.v2-tile-ic { grid-column: 1; grid-row: 1; color: var(--tone); align-self: start; }
.v2-tile-n { grid-column: 2; grid-row: 1; font: 400 11px/1 var(--v2-mono); color: #5d5569; letter-spacing: .1em; }
.v2-tile-name { grid-column: 1; grid-row: 2; font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.v2-tile-arrow { grid-column: 2; grid-row: 2; align-self: end; color: #8e869b; opacity: 0; transform: translate(-6px, 6px); transition: opacity .25s, transform .4s cubic-bezier(.34,1.56,.64,1); }
.v2-tile:hover .v2-tile-arrow { opacity: 1; transform: none; color: #f3eff7; }
.v2-tile:hover .v2-tile-n { color: var(--tone); }

/* page heads: less text, glass tile */
.v2-head-tile { width: 76px !important; height: 76px !important; border-radius: 22px !important; }
html.st-v2 .v2-page h1.v2-title, .v2-title { font-size: 44px !important; letter-spacing: -.04em !important; }
.v2-head { border-bottom-color: rgba(255,255,255,.06) !important; }

/* signature reveal: the block prints in, layer by layer, with a scan line */
/* children are clipped (not the block) so IntersectionObserver still sees the block */
html.v2-js .v2-reveal:not(.is-in) > * { clip-path: inset(100% 0 0 0); }
html.v2-js .v2-reveal.is-in { position: relative; }
html.v2-js .v2-reveal.is-in > * { animation: v2-print-in .9s steps(14, end) both; }
html.v2-js .v2-reveal.is-in::before {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; z-index: 5; pointer-events: none;
  background: linear-gradient(90deg, transparent, #ff7a2e 20%, #ff7a2e 80%, transparent);
  box-shadow: 0 0 14px rgba(255,122,46,.8);
  animation: v2-scan .9s steps(14, end) both;
}
@keyframes v2-print-in { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes v2-scan { 0% { top: 100%; opacity: 1; } 92% { opacity: 1; } 100% { top: 0; opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .v2-liquid i, .v2-hero-title span { animation: none !important; }
  html.v2-js .v2-reveal:not(.is-in) > *, html.v2-js .v2-reveal.is-in > * { clip-path: none !important; animation: none !important; }
  html.v2-js .v2-reveal.is-in::before { display: none; }
  .v2-tile, .v2-btn { transform: none !important; }
}
@media (max-width: 1000px) {
  .v2-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-tile { height: 140px; }
  .v2-readout { grid-template-columns: repeat(2, auto); row-gap: 18px; }
  .v2-readout div:nth-child(3) { padding-left: 0; border-left: 0; }
  .v2-hud-t { font-size: 13px; }
  .v2-block { margin-top: 72px; }
}

/* fewer words: static helper sentences hidden (status lines with ids stay) */
html.st-v2 .telegram-page header h2 + p,
html.st-v2 .tgcompact-metric small:not([id]),
html.st-v2 .ss-pool > div > p:not([id]),
html.st-v2 #poolForm > small,
html.st-v2 .ss-library-note,
html.st-v2 .drop-help,
html.st-v2 .st-native-size-help,
html.st-v2 .ls-test,
html.st-v2 .library-upload-desc,
html.st-v2 .library-upload-note { display: none !important; }
html.st-v2 .file-types, html.st-v2 .tg-metric-label { font-family: var(--v2-mono) !important; letter-spacing: .12em !important; text-transform: uppercase; font-size: 10px !important; color: #6f6780 !important; }
html.st-v2 .tgcompact-metric strong { font-family: var(--v2-mono) !important; font-weight: 500 !important; letter-spacing: -.02em !important; }
@media (max-width: 600px) {
  html.st-v2 .v2-page h1.v2-hero-title, .v2-hero-title { font-size: 54px !important; }
}

/* live site already ships its own tool finder button */
html.st-v2 #st-navigation .st-quick-trigger {
  height: 36px !important; min-height: 36px !important;
  display: inline-flex !important; align-items: center !important; gap: 10px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(255,255,255,.08) !important; border-radius: 999px !important;
  background: rgba(255,255,255,.04) !important; box-shadow: none !important;
  color: #8e869b !important; font-size: 13px !important;
  transition: background .2s, color .2s, border-color .2s !important;
}
html.st-v2 #st-navigation .st-quick-trigger:hover { background: rgba(255,255,255,.08) !important; color: #f3eff7 !important; }
html.st-v2 #st-navigation .st-quick-trigger kbd { font-family: var(--v2-mono) !important; color: #6f6780 !important; background: transparent !important; border: 0 !important; }
.st-v2-find { border-radius: 999px !important; background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.08) !important; }
html.st-v2 .st-tool-dialog {
  background: rgba(18,14,24,.9) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.5); backdrop-filter: blur(26px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.08) !important; border-radius: 18px !important;
  box-shadow: 0 40px 120px rgba(0,0,0,.6) !important;
}
html.st-v2 .st-tool-dialog::backdrop { background: rgba(5,5,7,.7); }

/* ==========================================================================
   9. Mascot — black astronaut cat (green eyes). Hero print + pixel cameos.
   ========================================================================== */
.v2-hero-stage { overflow: visible; }
.v2-cat {
  position: absolute; inset: 5% 11.5% 7%;
  cursor: pointer; outline: none;
  -webkit-tap-highlight-color: transparent;
}
.v2-cat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.v2-cat-wire { opacity: 0; filter: drop-shadow(0 0 6px rgba(196,163,242,.35)); transition: opacity .6s ease; }
.v2-cat-solid { filter: drop-shadow(0 24px 40px rgba(0,0,0,.45)); }
html.v2-js .v2-cat:not(.is-done) .v2-cat-solid { clip-path: inset(100% 0 0 0); }
.v2-cat.is-printing .v2-cat-solid { filter: none; }
.v2-cat-band {
  position: absolute; left: -4%; right: -4%; top: 100%; height: 2px; margin-top: -1px;
  background: linear-gradient(90deg, transparent, #ff7a2e 18%, #ffd2b0 50%, #ff7a2e 82%, transparent);
  box-shadow: 0 0 14px 2px rgba(255,122,46,.55);
  opacity: 0; pointer-events: none; border-radius: 2px;
}
/* contact shadow under the floating cat */
.v2-hero-stage::before {
  content: ""; position: absolute; left: 30%; right: 30%; bottom: 4.5%; height: 18px;
  background: radial-gradient(closest-side, rgba(0,0,0,.55), transparent);
  pointer-events: none;
}
.v2-cat:focus-visible { outline: 1px dashed rgba(255,122,46,.6); outline-offset: 6px; border-radius: 12px; }
.v2-hero-stage.is-live .v2-cat { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .v2-cat.is-float { animation: v2-cat-float 6.4s cubic-bezier(.45,0,.55,1) infinite; }
  .v2-hero-stage:has(.v2-cat.is-float)::before { animation: v2-cat-shadow 6.4s cubic-bezier(.45,0,.55,1) infinite; }
  .v2-cat.is-float:hover { animation-duration: 3.2s; }
}
@keyframes v2-cat-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  30% { transform: translate3d(0, -14px, 0) rotate(-1.6deg); }
  65% { transform: translate3d(0, -6px, 0) rotate(1.2deg); }
}
@keyframes v2-cat-shadow {
  0%, 100% { transform: scaleX(1); opacity: 1; }
  30% { transform: scaleX(.82); opacity: .6; }
  65% { transform: scaleX(.92); opacity: .8; }
}

/* pixel cameos */
.v2-px { image-rendering: pixelated; image-rendering: crisp-edges; flex: none; }
.v2-empty .v2-px { width: 54px; height: 60px; }
@media (prefers-reduced-motion: no-preference) {
  .v2-px-bob { animation: v2-px-bob 1.2s steps(2, jump-none) infinite; }
}
@keyframes v2-px-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }


/* tool finder palette */
.st-v2-pal { position: relative; }
.st-v2-pal input { padding-right: 64px !important; }
.v2-px-pal { position: absolute; right: 18px; top: 18px; width: 28px; height: 20px; pointer-events: none; }

/* tools section: the pixel cat sits at the end of the grid */
button.v2-px-buddy {
  all: unset; box-sizing: border-box;
  display: block; width: max-content; margin: 28px 0 0 auto; padding: 6px; cursor: pointer;
  border-radius: 10px; -webkit-tap-highlight-color: transparent;
}
[data-v2-pal] img { display: block; width: 45px; height: 50px; transition: transform .25s steps(3); }
[data-v2-pal]:hover img { transform: rotate(-8deg); }
[data-v2-pal].is-flip img { transform: scaleX(-1); }
[data-v2-pal].is-flip:hover img { transform: scaleX(-1) rotate(-8deg); }
[data-v2-pal]:focus-visible { outline: 1px dashed rgba(255,122,46,.6); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  [data-v2-pal].is-hop { animation: v2-px-hop .5s steps(5, jump-none); }
}
@keyframes v2-px-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-22px); } 70% { transform: translateY(-8px); } }

@media (max-width: 900px) {
  .v2-cat { inset: 4% 12% 6%; }
}

/* ==========================================================================
   10. Colour nav — each section has its own tone (matches the home tiles):
       Home lavender · Create sky · Library amber · Studio pink.
       Tools inside a section shift the hue so no two cards look alike.
   ========================================================================== */
html.st-v2 #st-navigation { --c: #c4a3f2; }

/* top tabs: coloured glyph, tinted label on hover/active */
.st-v2-tabic { display: none; }
html.st-v2 #st-navigation .st-v2-tabic {
  display: inline-grid; place-items: center; flex: none;
  width: 22px; height: 22px; margin-right: 2px; border-radius: 7px;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent);
  transition: transform .45s cubic-bezier(.34,1.56,.64,1), background .25s, box-shadow .25s;
}
html.st-v2 #st-navigation .st-v2-tabic svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
html.st-v2 #st-navigation .st-v2-tabic .tic-a { transform-box: fill-box; transform-origin: center; }
html.st-v2 #st-navigation .tabs > .tab:hover .st-v2-tabic,
html.st-v2 #st-navigation .tabs > .st-native-nav-group:hover > .st-native-nav-trigger .st-v2-tabic,
html.st-v2 #st-navigation .tabs > .tab.active .st-v2-tabic,
html.st-v2 #st-navigation .tabs > .st-native-nav-group > .st-native-nav-trigger.active .st-v2-tabic {
  background: var(--c); color: #0c0911;
  box-shadow: 0 0 16px color-mix(in srgb, var(--c) 70%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  html.st-v2 #st-navigation .tabs > .tab:hover .st-v2-tabic,
  html.st-v2 #st-navigation .tabs > .st-native-nav-group:hover > .st-native-nav-trigger .st-v2-tabic { transform: translateY(-2px) rotate(-8deg) scale(1.08); }
  html.st-v2 #st-navigation .tabs > .tab:hover .tic-a,
  html.st-v2 #st-navigation .tabs > .st-native-nav-group:hover .st-native-nav-trigger .tic-a { animation: v2-tic .6s cubic-bezier(.34,1.56,.64,1); }
}
@keyframes v2-tic { 0% { transform: scale(1); } 40% { transform: scale(1.35) translateY(-1px); } 100% { transform: scale(1); } }
html.st-v2 #st-navigation .tabs > .tab.active,
html.st-v2 #st-navigation .tabs > .st-native-nav-group > .st-native-nav-trigger.active { color: #fff !important; }
html.st-v2 #st-navigation .st-native-nav-chevron { color: var(--c); stroke: currentColor; }

@media (min-width: 1101px) {
  /* the liquid pill takes the colour of the tab it sits on */
  html.st-v2 .st-v2-ind {
    background: color-mix(in srgb, var(--c, #c4a3f2) 16%, transparent) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px color-mix(in srgb, var(--c, #c4a3f2) 38%, transparent), 0 0 24px -6px color-mix(in srgb, var(--c, #c4a3f2) 55%, transparent) !important;
  }
  html.st-v2 .st-v2-ind::after { background: var(--c, #c4a3f2) !important; box-shadow: 0 0 12px var(--c, #c4a3f2) !important; width: 22px !important; margin-left: -11px !important; }
  html.st-v2 .st-v2-ind:not(.st-v2-ind-instant) { transition-property: left, width, opacity, background, box-shadow !important; }
}

/* spectrum hairline under the header */
.st-v2-spectrum { display: none; }
html.st-v2 #st-navigation .st-v2-spectrum {
  display: block; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, #c4a3f2 12%, #6cc3e8 30%, #e9b949 50%, #e67ab8 70%, #c4a3f2 88%, transparent);
  background-size: 200% 100%;
  opacity: .55;
}
@media (prefers-reduced-motion: no-preference) {
  html.st-v2 #st-navigation .st-v2-spectrum { animation: v2-spectrum 14s linear infinite; }
}
@keyframes v2-spectrum { to { background-position: -200% 0; } }

/* stars chip + finder get a bit of colour too */
html.st-v2 #st-navigation .membership-stars-chip .stars-symbol { color: #ffc94d !important; text-shadow: 0 0 10px rgba(255,201,77,.6) !important; }
html.st-v2 #st-navigation .membership-stars-chip .membership-stars-plan { color: #c4a3f2 !important; }
html.st-v2 #st-navigation .st-quick-trigger svg, .st-v2-find svg { color: #c4a3f2; }

/* ---------- mega menu ---------- */
@media (min-width: 1101px) and (hover: hover) {
  html.st-v2 #st-navigation .st-native-nav-dropdown {
    background:
      radial-gradient(700px 260px at 0% 0%, color-mix(in srgb, var(--c) 16%, transparent), transparent 70%),
      #0b0a0f !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-top: 1px solid color-mix(in srgb, var(--c) 45%, transparent) !important;
    grid-template-columns: 220px repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
  /* label column: big section glyph + name + count */
  .st-v2-menu-label { display: flex !important; flex-direction: column; justify-content: flex-start; gap: 10px; padding: 6px 0 0 !important; }
  .st-v2-menu-glyph {
    display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; margin-bottom: 8px;
    color: #0c0911; background: var(--c);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 14%, transparent), 0 12px 36px -8px color-mix(in srgb, var(--c) 75%, transparent);
  }
  .st-v2-menu-glyph svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .st-v2-menu-label strong { display: block; font: 700 26px/1.05 "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: -.02em; color: #fff; }
  .st-v2-menu-label em { display: block; font: 500 11px/1 var(--v2-mono, monospace); font-style: normal; letter-spacing: .18em; color: var(--c); }

  /* tool cards: each in its own tone */
  html.st-v2 #st-navigation .st-native-nav-dropdown > .tab {
    --c: #c4a3f2;
    min-height: 148px !important;
    padding: 22px !important;
    overflow: hidden !important;
    background:
      radial-gradient(220px 140px at 100% 100%, color-mix(in srgb, var(--c) 18%, transparent), transparent 70%),
      linear-gradient(165deg, color-mix(in srgb, var(--c) 9%, rgba(255,255,255,.02)), rgba(255,255,255,.012) 60%) !important;
    border: 1px solid color-mix(in srgb, var(--c) 18%, rgba(255,255,255,.04)) !important;
    transition: background .3s, border-color .3s, box-shadow .35s, transform .5s cubic-bezier(.34,1.56,.64,1) !important;
  }
  html.st-v2 #st-navigation .st-native-nav-dropdown > .tab:hover,
  html.st-v2 #st-navigation .st-native-nav-dropdown > .tab:focus-visible {
    background:
      radial-gradient(260px 170px at 100% 100%, color-mix(in srgb, var(--c) 30%, transparent), transparent 70%),
      linear-gradient(165deg, color-mix(in srgb, var(--c) 16%, rgba(255,255,255,.03)), rgba(255,255,255,.02) 60%) !important;
    border-color: color-mix(in srgb, var(--c) 60%, transparent) !important;
    box-shadow: 0 22px 60px -24px color-mix(in srgb, var(--c) 80%, transparent) !important;
    transform: translateY(-4px) !important;
  }
  html.st-v2 #st-navigation .st-native-nav-dropdown > .tab.active {
    border-color: color-mix(in srgb, var(--c) 45%, transparent) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent) !important;
  }
  html.st-v2 #st-navigation .st-native-nav-dropdown .st-native-nav-icon.st-mi-holder,
  html.st-v2 #st-navigation .st-native-nav-dropdown .st-native-nav-icon {
    width: 52px !important; height: 52px !important; flex: 0 0 52px !important;
    display: grid !important; place-items: center !important;
    margin: 0 0 4px !important; border-radius: 16px !important;
    color: var(--c) !important;
    background: color-mix(in srgb, var(--c) 14%, transparent) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 32%, transparent) !important;
    transition: background .3s, color .3s, box-shadow .3s, transform .5s cubic-bezier(.34,1.56,.64,1) !important;
  }
  html.st-v2 #st-navigation .st-native-nav-dropdown .st-native-nav-icon svg.st-mi { width: 32px !important; height: 32px !important; stroke-width: 2 !important; }
  html.st-v2 #st-navigation .st-native-nav-dropdown svg.st-mi .st-mi-acc { stroke: #fff !important; }
  html.st-v2 #st-navigation .st-native-nav-dropdown > .tab:hover .st-native-nav-icon {
    background: var(--c) !important; color: #0c0911 !important;
    box-shadow: 0 10px 30px -6px color-mix(in srgb, var(--c) 80%, transparent) !important;
    transform: rotate(-6deg) scale(1.06);
  }
  html.st-v2 #st-navigation .st-native-nav-dropdown > .tab:hover svg.st-mi .st-mi-acc { stroke: #0c0911 !important; }

  .st-v2-menu-tag {
    display: inline-block; margin-top: -2px; padding: 5px 9px; border-radius: 999px;
    font: 500 10px/1 var(--v2-mono, monospace); letter-spacing: .14em; white-space: nowrap;
    color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 26%, transparent);
  }
  .st-v2-menu-num { position: absolute; top: 22px; right: 22px; font: 500 11px/1 var(--v2-mono, monospace); letter-spacing: .12em; color: #6f6780; transition: color .25s; }
  html.st-v2 #st-navigation .st-native-nav-dropdown > .tab:hover .st-v2-menu-num { color: var(--c); }
  .st-v2-menu-arrow { top: auto !important; bottom: 22px; right: 22px !important; color: var(--c) !important; }

  /* cards drop in one after another when a menu opens */
  @media (prefers-reduced-motion: no-preference) {
    html.st-v2 #st-navigation .st-native-nav-group:hover > .st-native-nav-dropdown > *,
    html.st-v2 #st-navigation .st-native-nav-group:focus-within > .st-native-nav-dropdown > * { animation: v2-dd-in .5s cubic-bezier(.22,1,.36,1) both; }
    html.st-v2 #st-navigation .st-native-nav-dropdown > :nth-child(2) { animation-delay: .04s !important; }
    html.st-v2 #st-navigation .st-native-nav-dropdown > :nth-child(3) { animation-delay: .08s !important; }
    html.st-v2 #st-navigation .st-native-nav-dropdown > :nth-child(4) { animation-delay: .12s !important; }
  }
}
@keyframes v2-dd-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* mobile menu: coloured icons for the tools too */
@media (max-width: 1100px) {
  html.st-v2 #st-navigation .st-native-nav-dropdown > .tab { --c: #c4a3f2; }
  html.st-v2 #st-navigation .st-native-nav-dropdown .st-native-nav-icon { color: var(--c) !important; }
  .st-v2-menu-tag, .st-v2-menu-num { display: none; }
}

/* ==========================================================================
   11. Performance — same look, far less work per frame.
   - liquid blobs: soft radial gradients moved by transform only
     (the old 90px blur + animated border-radius repainted every frame)
   - glass tiles/buttons: no backdrop-filter (every animated pixel behind
     them forced all of them to re-blur, every frame)
   - moving things use transform, not left/top; big text sheen runs twice
   ========================================================================== */
.v2-liquid i {
  filter: none !important;
  border-radius: 50% !important;
  width: 60vw !important; height: 60vw !important;
  background: radial-gradient(closest-side, var(--blob) 0%, color-mix(in srgb, var(--blob) 55%, transparent) 38%, transparent 100%) !important;
  opacity: .2;
  will-change: transform;
  contain: strict;
}
.v2-liquid i:nth-child(1) { --blob: #8d68e0; animation-name: v2-blob-a2 !important; }
.v2-liquid i:nth-child(2) { --blob: #ff7a2e; animation-name: v2-blob-b2 !important; opacity: .1; }
.v2-liquid i:nth-child(3) { --blob: #3aa0d8; animation-name: v2-blob-c2 !important; opacity: .09; }
body:not([data-st-page="home"]) .v2-liquid i { animation-play-state: paused !important; opacity: .11; }
body:not([data-st-page="home"]) .v2-liquid i:nth-child(n+2) { opacity: .055; }
@keyframes v2-blob-a2 { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(14vw,10vh,0) scale(1.12, .92); } }
@keyframes v2-blob-b2 { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-16vw,22vh,0) scale(.9, 1.1); } }
@keyframes v2-blob-c2 { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-10vw,-18vh,0) scale(1.1); } }
.v2-liquid u { left: 0 !important; top: 0 !important; transform: translate3d(calc(var(--px, 50vw) - 320px), calc(var(--py, 30vh) - 320px), 0); will-change: transform; }

.v2-glass, .v2-btn:not(.v2-btn-primary) { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.v2-glass { background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.02)) !important; }
html.st-v2 body #st-navigation.site-header::before {
  background: rgba(12,9,17,.8);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}

/* workflow dot: the whole track slides (transform), the dot rides on it */
.v2-flow-dot {
  left: 0 !important; right: 0; width: auto !important; margin-left: 0 !important;
  background: none !important; box-shadow: none !important; border-radius: 0 !important;
  animation-name: v2-travel-t !important; will-change: transform; pointer-events: none;
}
.v2-flow-dot::before { content: ""; position: absolute; left: -1px; top: 0; width: 16px; height: 16px; border-radius: 50%; background: #ff7a2e; box-shadow: 0 0 22px 6px rgba(255,122,46,.45); }
@keyframes v2-travel-t { 0% { transform: translate3d(0,0,0); } 90%, 100% { transform: translate3d(100%,0,0); } }
.v2-shelf-track.is-moving, .v2-flow-fill { will-change: transform; }

.v2-hero-title span { animation-iteration-count: 2 !important; }
.v2-cat { will-change: transform; }

/* spectrum hairline: slide a wide strip instead of repainting the gradient */
html.st-v2 #st-navigation .st-v2-spectrum {
  overflow: hidden; background: none !important; animation: none !important;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
html.st-v2 #st-navigation .st-v2-spectrum::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 200%;
  background: linear-gradient(90deg, #c4a3f2, #6cc3e8 25%, #e9b949 50%, #e67ab8 75%, #c4a3f2) 0 0 / 50% 100% repeat-x;
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  html.st-v2 #st-navigation .st-v2-spectrum::before { animation: v2-spectrum-t 14s linear infinite; }
}
@keyframes v2-spectrum-t { to { transform: translate3d(-50%,0,0); } }

/* ==========================================================================
   12. Space Cat buddy (pixel) — spacetools-space-cat.js
   ========================================================================== */
.v2-buddy {
  position: fixed; left: 0; bottom: 6px; z-index: 9000;
  width: 64px; height: 64px; pointer-events: none;
  will-change: transform; contain: layout style;
}
.v2-buddy[hidden] { display: none; }
.v2-buddy-sprite {
  position: absolute; inset: 0; pointer-events: auto; cursor: grab; touch-action: none;
  background-repeat: no-repeat; background-size: 896px 64px; background-position: 0 0;
  image-rendering: pixelated; image-rendering: crisp-edges;
  filter: drop-shadow(0 0 1px rgba(0,0,0,.6));
}
.v2-buddy.is-drag .v2-buddy-sprite { cursor: grabbing; }
.v2-buddy-shadow {
  position: absolute; left: 14px; right: 14px; bottom: -3px; height: 6px; border-radius: 50%;
  background: rgba(0,0,0,.45);
  transform: translateY(calc(var(--lift, 0) * 120px)) scale(calc(1 - var(--lift, 0) * .6));
  opacity: calc(1 - var(--lift, 0) * .7);
}
.v2-buddy-bubble {
  position: absolute; left: 40px; top: -16px; min-width: 20px; padding: 3px 6px;
  font: 700 12px/1 var(--v2-mono, monospace); color: #0c0911; text-align: center;
  background: #f3eff7; border-radius: 3px;
  box-shadow: 0 0 0 2px #26203a, 3px 3px 0 0 rgba(0,0,0,.35);
  opacity: 0; transform: translateY(6px) scale(.6); pointer-events: none;
  transition: opacity .15s steps(2), transform .2s steps(3);
}
.v2-buddy-bubble.is-on { opacity: 1; transform: none; }
.v2-buddy[data-state="sleep"] .v2-buddy-bubble { background: transparent; box-shadow: none; color: #c4a3f2; font-size: 14px; }
@media (prefers-reduced-motion: no-preference) {
  .v2-buddy[data-state="sleep"] .v2-buddy-bubble.is-on { animation: v2-zz 2.4s steps(6) infinite; }
}
@keyframes v2-zz { 0% { transform: translate(0, 6px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(10px, -14px); opacity: 0; } }
.v2-buddy-x {
  position: absolute; right: -6px; top: -4px; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 4px;
  font: 700 12px/18px var(--v2-mono, monospace); color: #f3eff7; background: #26203a; cursor: pointer;
  pointer-events: auto; opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s;
}
.v2-buddy:hover .v2-buddy-x, .v2-buddy-x:focus-visible { opacity: 1; transform: none; }
.v2-buddy.is-drag .v2-buddy-x { opacity: 0; }

/* tucked away: the head peeks up from the bottom-right corner */
.v2-buddy-peek {
  position: fixed; right: 22px; bottom: 0; z-index: 9000;
  width: 56px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer;
  transform: translateY(100%); transition: transform .5s steps(5);
  -webkit-tap-highlight-color: transparent;
}
.v2-buddy-peek[hidden] { display: none; }
.v2-buddy-peek.is-left { right: auto; left: 18px; }
.v2-buddy-peek img { display: block; width: 56px; height: 40px; image-rendering: pixelated; image-rendering: crisp-edges; }
.v2-buddy-peek.is-up { transform: translateY(12px); }
.v2-buddy-peek:hover, .v2-buddy-peek:focus-visible { transform: translateY(4px); }
@media (prefers-reduced-motion: no-preference) {
  .v2-buddy-peek.is-up img { animation: v2-peek-look 3s steps(1) infinite; }
  .v2-buddy-peek.is-happy img { animation: v2-peek-hop .6s steps(4); }
}
@keyframes v2-peek-look { 0%, 40% { transform: none; } 45%, 70% { transform: scaleX(-1); } 75%, 100% { transform: none; } }
@keyframes v2-peek-hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@media print { .v2-buddy, .v2-buddy-peek { display: none !important; } }

/* ==========================================================================
   13. Design tokens + motion system (boards "Telegram" and "Hareket sistemi")
   Colours   zemin #0C0911 · yüzey #120E18 · çizgi #2B2336 · lavanta #C4A3F2
             nozul #FF7A2E = only "happening now" (printing, running, active)
             ok #7EE0A8 · failed #FF8FB8 · star #F5C54A
             sections: create #6CC3E8 · library #E9B949 · studio #E67AB8
   Type      Tomorrow for titles and big numbers, Plus Jakarta body,
             Space Mono for labels and measurements
   Motion    01 print-in (1100 ms, .7,0,.2,1)  home / landing only
             02 wire -> solid (800 ms)         3D previews + thumbnails
             03 extrude (350 ms, .22,1,.36,1)  everything clickable, no glow
             04 handoff (View Transitions)     tool icon + title fly into the next page
             tool pages: only 03 + 04 · prefers-reduced-motion: all off
   ========================================================================== */
html.st-v2 {
  --t-bg: #0c0911; --t-surface: #120e18; --t-raised: #16111d; --t-raised-2: #1b1523;
  --t-line: #2b2336; --t-divider: #211a2a; --t-row: #1a1421;
  --t-text: #f3eff7; --t-muted: #a9a1b5; --t-dim: #8e869b; --t-faint: #6f6780;
  --t-lav: #c4a3f2; --t-lav-h: #e2d1fa; --t-nozzle: #ff7a2e;
  --t-ok: #7ee0a8; --t-bad: #ff8fb8; --t-star: #f5c54a;
  --t-disp: "Tomorrow", "Plus Jakarta Sans", system-ui, sans-serif;
  --t-ease-print: cubic-bezier(.7,0,.2,1);
  --t-ease-x: cubic-bezier(.22,1,.36,1);
  --sec: #c4a3f2;
  --v2-bg: #0c0911; --v2-s1: #120e18; --v2-s2: #16111d; --v2-s3: #1b1523;
  --v2-line: #211a2a; --v2-line-2: #2b2336; --v2-text: #f3eff7; --v2-muted: #8e869b; --v2-dim: #6f6780;
  --v2-acc-h: #e2d1fa;
  --bg: #0c0911 !important; --bg-soft: #120e18 !important; --card: #120e18 !important; --card-hover: #16111d !important;
  --border: #2b2336 !important; --text: #f3eff7 !important; --muted: #a9a1b5 !important; --success: #7ee0a8 !important;
  scrollbar-color: #2b2336 transparent;
}
html.st-v2 body { background-color: #0c0911 !important; color: #f3eff7; }
html.st-v2 body:is([data-st-page="upload"],[data-st-page="model_editor"],[data-st-page="design"]) { --sec: #6cc3e8; }
html.st-v2 body:is([data-st-page="library"],[data-st-page="stl_library"],[data-st-page="telegram"]) { --sec: #e9b949; }
html.st-v2 body:is([data-st-page="stickers"],[data-st-page="etsy"],[data-st-page="listings"]) { --sec: #e67ab8; }
html.st-v2 :is(a, button, [role="button"], input, select, textarea, summary):focus-visible { outline: 2px solid #ff7a2e !important; outline-offset: 2px; }
html.st-v2 #st-page-content a:not([class]) { color: #c4a3f2; }
html.st-v2 #st-page-content a:not([class]):hover { color: #e2d1fa; }

/* ---------- type ---------- */
html.st-v2 .v2-page :is(h1.v2-hero-title, h1.v2-title),
html.st-v2 :is(.v2-title, .v2-hero-title, .v2-tile-name, .st-v2-menu-label strong),
html.st-v2 #st-page-content h1:not(.v2-own *),
html.st-v2 #st-page-content :is(.membership-hero h1, .etsy-hero h1, section[class*="hero"] > h1):not(.v2-own *) {
  font-family: var(--t-disp) !important; font-weight: 600 !important; letter-spacing: -.03em !important;
}
html.st-v2 .v2-page h1.v2-hero-title, .v2-hero-title { font-size: clamp(46px, 5.3vw, 86px) !important; line-height: 1 !important; letter-spacing: -.035em !important; }
html.st-v2 .v2-page h1.v2-title, .v2-title { font-size: 36px !important; line-height: 1.08 !important; }
html.st-v2 #st-page-content :is(.membership-hero h1, .etsy-hero h1, section[class*="hero"] > h1):not(.v2-own *) { font-size: clamp(32px, 3.4vw, 48px) !important; letter-spacing: -.035em !important; }
.v2-tile-name { font-size: 17px !important; }
.st-v2-menu-label strong { font-size: 22px !important; }
/* big numbers: display face; small readouts stay mono */
html.st-v2 :is(.v2-readout dd, .tgcompact-metric strong, .ml-stat strong, .ml-stat-value, .plan-price .num, .st-stars-balance) {
  font-family: var(--t-disp) !important; font-weight: 600 !important; letter-spacing: -.03em !important;
}
.v2-readout dd { font-size: 26px !important; }
html.st-v2 #st-page-content :is(h2, h3):not(.v2-own *) { color: #f3eff7; }

/* ---------- page head: crumb + tile in the section tone ---------- */
.v2-crumb { color: var(--sec) !important; font-size: 12px !important; letter-spacing: .16em !important; }
.v2-head { border-bottom-color: #211a2a !important; }
.v2-head-tile {
  background: color-mix(in srgb, var(--sec) 10%, #120e18) !important;
  border: 1px solid color-mix(in srgb, var(--sec) 32%, #2b2336) !important;
  color: var(--sec) !important; --icbg: #120e18;
}
.v2-head-tile::before, .v2-head-tile::after { display: none !important; }
html .v2-head svg.st-mi [class*="mi-"] { animation-play-state: paused; }
html .v2-head-tile:hover svg.st-mi [class*="mi-"] { animation-play-state: running; }

/* ---------- surfaces: flat, solid, hairline (no glass, no glare) ---------- */
html.st-v2 #st-page-content :is([class*="card"],[class*="Card"],[class*="panel"],[class*="Panel"],aside,[class*="sidebar"],[class*="rail"]):not([class*="thumb"]):not([class*="img"]):not([class*="image"]):not([class*="preview"]):not([class*="icon"]):not([class*="avatar"]):not([class*="logo"]):not([class*="count"]):not(img,svg,canvas,video,button,a,input,select,textarea,span,i,em,strong,small):not(.v2-own *) {
  background-color: #120e18 !important; background-image: none !important;
  border-color: #2b2336 !important; box-shadow: none !important;
}
html.st-v2 #st-page-content :is(.maker-card, .ss-pool, .ss-card, .ls-panel, .telegram-panel, .ml-org-panel, .library-upload-panel, .settings-grid > .card, .card, .tgcompact-metric, #tgWorkerControl, .composer, .membership-current-strip) {
  border-radius: 22px !important;
}
.v2-glass { background: #120e18 !important; border: 1px solid #2b2336 !important; box-shadow: none !important; }
.v2-glass::before, .v2-glass::after { display: none !important; }
html.st-v2 #st-page-content :is(input[type="text"], input[type="search"], input[type="email"], input[type="number"], input[type="password"], input[type="url"], input:not([type]), textarea, select) {
  background-color: #0c0911 !important; border-color: #2b2336 !important; border-radius: 12px;
}
html.st-v2 #st-page-content :is(input, textarea, select):focus { border-color: #c4a3f2 !important; box-shadow: 0 0 0 3px rgba(196,163,242,.14) !important; }
/* segmented controls / tabs: bordered track, raised active */
html.st-v2 #st-page-content :is(button,[role="button"],a,[class*="tab"],[class*="chip"],[class*="pill"],[class*="filter"]):is(.active,.is-active,.selected,[aria-pressed="true"],[aria-selected="true"],[aria-current="page"]) {
  background-color: #1b1523 !important; border-color: #2b2336 !important; color: #f3eff7 !important;
}
/* tables and list rows */
html.st-v2 #st-page-content table { border-color: #211a2a !important; }
html.st-v2 #st-page-content th, html.st-v2 #st-page-content .telegram-channel-head {
  font-family: var(--v2-mono) !important; font-size: 11px !important; font-weight: 500 !important;
  letter-spacing: .12em !important; text-transform: uppercase; color: #6f6780 !important;
  background: transparent !important; border-color: #211a2a !important;
}
html.st-v2 #st-page-content :is(td, .telegram-channel-row) { border-color: #1a1421 !important; }
html.st-v2 #st-page-content :is(tbody tr, .telegram-channel-row) { transition: background .2s; }
html.st-v2 #st-page-content :is(tbody tr, .telegram-channel-row):hover { background: #16111d !important; }

/* ---------- status colours ---------- */
html.st-v2 .telegram-status { color: #7ee0a8 !important; }
html.st-v2 .telegram-status .telegram-status-dot { background: #7ee0a8 !important; box-shadow: none !important; }
html.st-v2 .telegram-status.scanning { color: #ff7a2e !important; }
html.st-v2 .telegram-status.scanning .telegram-status-dot { background: #ff7a2e !important; }
html.st-v2 .telegram-status.error { color: #ff8fb8 !important; }
html.st-v2 .telegram-status.error .telegram-status-dot { background: #ff8fb8 !important; border-radius: 2px !important; }
html.st-v2 .tg-worker-control.running .tg-worker-dot { background: #ff7a2e !important; box-shadow: none !important; animation: v2-pulse 1.2s ease-in-out infinite; }
html.st-v2 .tg-worker-control.stopped .tg-worker-dot { background: #ff8fb8 !important; box-shadow: none !important; }
html.st-v2 #st-page-content :is(.status-done, .status-success, .status-ready, .status-active, .is-done) { color: #7ee0a8 !important; }
html.st-v2 #st-page-content :is(.status-failed, .status-error, .status-fail) { color: #ff8fb8 !important; }
html.st-v2 #st-page-content :is(.status-processing, .status-running, .status-queued, .status-pending, .status-generating, .status-scanning) { color: #ff7a2e !important; }
html.st-v2 #st-navigation .membership-stars-chip .stars-symbol { color: #f5c54a !important; text-shadow: none !important; }
@keyframes v2-pulse { 50% { opacity: .35; } }

/* progress: the nozzle stripe, only for things that are running */
html.st-v2 #st-page-content :is(.upload-progress-fill, .progress-bar-fill, .vd-progress-fill, .tgcompact-progress-bar, progress::-webkit-progress-value) {
  background: repeating-linear-gradient(-45deg, rgba(255,255,255,.18) 0 6px, transparent 6px 12px), #ff7a2e !important;
  background-size: 34px 34px !important; box-shadow: none !important;
}
html.st-v2 #st-page-content :is(.upload-progress-bar, .vd-progress-track, .tgcompact-progress, progress) { background: #2b2336 !important; border: 0 !important; }
@media (prefers-reduced-motion: no-preference) {
  html.st-v2 #st-page-content :is(.upload-progress-fill, .progress-bar-fill, .vd-progress-fill, .tgcompact-progress-bar) { animation: v2-stripe 1s linear infinite; }
}
@keyframes v2-stripe { to { background-position: 34px 0; } }

/* layer-line motif (1 px / 7 px): print-bed texture for empty / drop areas */
html.st-v2 :is(#dropzone, .v2-empty, .me-canvas-empty, .library-empty, [class*="empty-state"]) {
  background-image: repeating-linear-gradient(0deg, rgba(196,163,242,.09) 0 1px, transparent 1px 7px) !important;
}

/* ---------- 03 extrude: clickable things gain printed layers on hover ---------- */
/* cards: 6 x 1 px layers, lifted 6 px */
.v2-tile, .v2-model, .v2-row, .v2-empty,
html.st-v2 #libraryPageRoot .card,
html.st-v2 #st-page-content :is(.ml-card, .ss-card, .plan-card, .st-home-tool, a[class*="card"]),
html.st-v2 #st-navigation .st-native-nav-dropdown > .tab {
  transition: transform .35s var(--t-ease-x), box-shadow .35s var(--t-ease-x), border-color .35s var(--t-ease-x), background-color .25s !important;
}
.v2-tile { transform: none !important; }
.v2-tile:hover, .v2-model:hover, .v2-row:hover, .v2-empty:hover,
html.st-v2 #libraryPageRoot .card:hover,
html.st-v2 #st-page-content :is(.ml-card, .ss-card, .plan-card, .st-home-tool, a[class*="card"]):hover {
  transform: translate(-6px, -6px) !important;
  border-color: #4a3d5c !important;
  box-shadow: 1px 1px 0 #3a3048, 2px 2px 0 #342a41, 3px 3px 0 #2f263a, 4px 4px 0 #2a2134, 5px 5px 0 #251d2e, 6px 6px 0 #201928, 0 36px 60px -24px rgba(0,0,0,.85) !important;
}
.v2-tile:hover .v2-tile-arrow, .v2-row:hover .v2-row-arrow { color: #ff7a2e !important; transform: translate(3px, -3px) !important; opacity: 1 !important; }
/* mega-menu cards: same layers, tinted by the tool colour */
@media (min-width: 1101px) and (hover: hover) {
  html.st-v2 #st-navigation .st-native-nav-dropdown > .tab:hover,
  html.st-v2 #st-navigation .st-native-nav-dropdown > .tab:focus-visible {
    transform: translate(-6px, -6px) !important;
    border-color: color-mix(in srgb, var(--c) 55%, #2b2336) !important;
    box-shadow:
      1px 1px 0 color-mix(in srgb, var(--c) 42%, #0c0911), 2px 2px 0 color-mix(in srgb, var(--c) 36%, #0c0911),
      3px 3px 0 color-mix(in srgb, var(--c) 30%, #0c0911), 4px 4px 0 color-mix(in srgb, var(--c) 24%, #0c0911),
      5px 5px 0 color-mix(in srgb, var(--c) 18%, #0c0911), 6px 6px 0 color-mix(in srgb, var(--c) 12%, #0c0911),
      0 36px 60px -24px rgba(0,0,0,.85) !important;
  }
  html.st-v2 #st-navigation .st-native-nav-dropdown > .tab:hover .st-native-nav-icon { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 60%, transparent) !important; }
}
/* buttons: 3 layers, lifted 3 px */
.v2-btn, html.st-v2 #st-page-content :is(button, [role="button"], a[class*="btn"], a[class*="button"], label[class*="btn"], .choose-file-btn):not(:disabled):not(.v2-own *):not([class*="tab"]):not([class*="chip"]):not([class*="pill"]):not([class*="filter"]):not([role="tab"]):not([class*="toggle"]):not([class*="close"]):not([class*="icon"]):not([class*="thumb"]) {
  transition: transform .35s var(--t-ease-x), box-shadow .35s var(--t-ease-x), background-color .2s, border-color .2s, color .2s !important;
}
.v2-btn::before { display: none !important; }
.v2-btn-primary { background: #c4a3f2 !important; color: #150d1e !important; box-shadow: none !important; }
.v2-btn:not(.v2-btn-primary) { background: #120e18 !important; box-shadow: inset 0 0 0 1px #2b2336 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.v2-btn { transform: none !important; }
.v2-btn-primary:hover,
html.st-v2 #st-page-content :is([class*="primary"],[class*="cta"],button[type="submit"],[class*="generate"],.choose-file-btn,.btn.purple):is(button,a,label,[role="button"]):not(:disabled):not(.v2-own *):hover {
  transform: translate(-3px, -3px) !important;
  background-color: #c4a3f2 !important;
  box-shadow: 1px 1px 0 #8d6bc0, 2px 2px 0 #7f5fb0, 3px 3px 0 #7253a0 !important;
}
.v2-btn:not(.v2-btn-primary):hover,
html.st-v2 #st-page-content :is(button,[role="button"],a[class*="btn"],a[class*="button"],label[class*="btn"]):not([class*="primary"]):not([class*="cta"]):not([type="submit"]):not([class*="generate"]):not(.active):not(:disabled):not([aria-pressed="true"]):not([aria-selected="true"]):not([class*="tab"]):not([class*="chip"]):not([class*="pill"]):not([class*="filter"]):not([role="tab"]):not([class*="toggle"]):not([class*="close"]):not([class*="icon"]):not([class*="thumb"]):not(.v2-own *):hover {
  transform: translate(-3px, -3px) !important;
  box-shadow: 1px 1px 0 #3a3048, 2px 2px 0 #342a41, 3px 3px 0 #2f263a !important;
}
.v2-btn:not(.v2-btn-primary):hover { box-shadow: inset 0 0 0 1px #4a3d5c, 1px 1px 0 #3a3048, 2px 2px 0 #342a41, 3px 3px 0 #2f263a !important; }
.v2-btn:active, html.st-v2 #st-page-content :is(button, a[class*="btn"]):not(:disabled):active { transform: none !important; box-shadow: none !important; transition-duration: .08s !important; }

/* ---------- 02 wire -> solid: previews arrive as a lavender blueprint, then fill ---------- */
html.st-v2 .v2-ws { transition: filter .8s var(--t-ease-print), opacity .8s var(--t-ease-print) !important; }
html.st-v2 .v2-ws.is-wire { filter: grayscale(1) contrast(2.6) brightness(1.25) sepia(1) hue-rotate(215deg) saturate(2.4); opacity: .45; transition: none !important; }

/* ---------- 01 print-in: home / landing only ---------- */
html.v2-js .v2-reveal.is-in > * { animation: v2-print-in 1.1s var(--t-ease-print) both !important; }
html.v2-js .v2-reveal.is-in > *:nth-child(2) { animation-delay: .09s !important; }
html.v2-js .v2-reveal.is-in > *:nth-child(3) { animation-delay: .18s !important; }
html.v2-js .v2-reveal.is-in::before {
  height: 3px !important; background: #ff7a2e !important; box-shadow: 0 0 14px 3px rgba(255,122,46,.55) !important;
  animation: v2-scan 1.1s var(--t-ease-print) both !important;
}
/* tool pages: only extrude + handoff */
html.v2-js body:not([data-st-page="home"]) .v2-reveal > * { clip-path: none !important; animation: none !important; }
html.v2-js body:not([data-st-page="home"]) .v2-reveal::before { display: none !important; }
html.st-v2 body:not([data-st-page="home"]) #st-navigation .st-v2-spectrum::before { animation: none !important; }
html.st-v2 body:not([data-st-page="home"]) .v2-liquid i { animation: none !important; }

/* ---------- 04 handoff: the clicked tool's icon + name fly into the new page head ---------- */
html.st-v2 .v2-head .v2-head-tile { view-transition-name: st-hand; }
html.st-v2 .v2-head .v2-title { view-transition-name: st-hand-t; width: fit-content; }
::view-transition-group(st-hand), ::view-transition-group(st-hand-t) {
  animation-duration: .6s; animation-timing-function: cubic-bezier(.7,0,.2,1); z-index: 20;
}
::view-transition-old(st-hand-t), ::view-transition-new(st-hand-t) { height: 100%; object-fit: fill; }
html:active-view-transition-type(st-hand)::view-transition-old(root) { animation: st-v2-fade-out .2s ease both; }
html:active-view-transition-type(st-hand)::view-transition-new(root) { animation: st-v2-fade-in .3s ease .12s both; }

@media (prefers-reduced-motion: reduce) {
  .v2-tile:hover, .v2-model:hover, .v2-row:hover, .v2-btn:hover,
  html.st-v2 #st-page-content :is(button, a, .card):hover,
  html.st-v2 #st-navigation .st-native-nav-dropdown > .tab:hover { transform: none !important; }
  html.st-v2 .v2-ws, html.st-v2 .v2-ws.is-wire { filter: none !important; opacity: 1 !important; transition: none !important; }
  html.st-v2 .v2-head .v2-head-tile, html.st-v2 .v2-head .v2-title { view-transition-name: none; }
  html.st-v2 #st-page-content :is(.upload-progress-fill, .progress-bar-fill, .vd-progress-fill, .tgcompact-progress-bar) { animation: none !important; }
}

/* ==========================================================================
   14. Library language — "print bed" cards
   - every model sits on a print bed: layer lines, a warm spotlight in the
     section tone, registration brackets that snap in on hover
   - every category / type has one colour everywhere (sidebar dot = card tag)
   - button colour says where it goes: Create Listing = Studio pink,
     3D preview = lavender, delete = failed pink; the rest stays neutral
   ========================================================================== */
html.st-v2 :is(#libraryPageRoot .card, .ml-card) {
  position: relative;
  background: #120e18 !important; border: 1px solid #2b2336 !important;
  border-radius: 22px !important; box-shadow: none !important; overflow: visible !important;
}
/* print bed */
html.st-v2 #libraryPageRoot .thumb-row,
html.st-v2 .ml-card .ml-preview {
  position: relative; isolation: isolate;
  border-radius: 16px !important; overflow: hidden !important;
  border: 1px solid #211a2a !important;
  background:
    radial-gradient(ellipse 75% 42% at 50% 104%, color-mix(in srgb, var(--sec) 22%, transparent), transparent 72%),
    repeating-linear-gradient(0deg, rgba(196,163,242,.07) 0 1px, transparent 1px 7px),
    #0c0911 !important;
}
html.st-v2 .ml-card .ml-preview { margin: 8px 8px 0 !important; width: auto !important; }
html.st-v2 #libraryPageRoot .thumb-row img { position: relative; z-index: 0; filter: drop-shadow(0 18px 18px rgba(0,0,0,.55)); transition: transform .5s var(--t-ease-x, ease); }
html.st-v2 #libraryPageRoot .card:hover .thumb-row img { transform: translateY(-4px) scale(1.03); }
/* registration brackets (four corners in one layer) */
html.st-v2 :is(#libraryPageRoot .thumb-row, .ml-card .ml-preview)::after {
  content: ""; position: absolute; inset: 12px; z-index: 3; pointer-events: none;
  --b: rgba(233,185,73,.0);
  background:
    linear-gradient(var(--b), var(--b)) 0 0 / 14px 1.5px, linear-gradient(var(--b), var(--b)) 0 0 / 1.5px 14px,
    linear-gradient(var(--b), var(--b)) 100% 0 / 14px 1.5px, linear-gradient(var(--b), var(--b)) 100% 0 / 1.5px 14px,
    linear-gradient(var(--b), var(--b)) 0 100% / 14px 1.5px, linear-gradient(var(--b), var(--b)) 0 100% / 1.5px 14px,
    linear-gradient(var(--b), var(--b)) 100% 100% / 14px 1.5px, linear-gradient(var(--b), var(--b)) 100% 100% / 1.5px 14px;
  background-repeat: no-repeat;
  transition: inset .35s var(--t-ease-x, ease), --b .35s;
}
@property --b { syntax: "<color>"; inherits: false; initial-value: transparent; }
html.st-v2 :is(#libraryPageRoot .card:hover .thumb-row, .ml-card:hover .ml-preview)::after { inset: 7px; --b: var(--sec); }
html.st-v2 .ml-card .ml-preview img { transition: transform .5s var(--t-ease-x, ease); }
html.st-v2 .ml-card:hover .ml-preview img { transform: scale(1.04); }

/* names + spec lines */
html.st-v2 :is(.library-clean-name, #libraryPageRoot .card-name-text, .ml-card-body h2) {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important; font-weight: 700 !important;
  font-size: 15px !important; letter-spacing: -.01em !important; color: #f3eff7 !important;
}
html.st-v2 .library-clean-name { background: linear-gradient(0deg, rgba(12,9,17,.92), transparent) !important; text-shadow: none !important; }
html.st-v2 :is(.ml-card-meta, .ml-source, .library-clean-date, #libraryPageRoot .card-date) {
  font-family: var(--v2-mono) !important; font-size: 11px !important; letter-spacing: .02em; color: #8e869b !important;
}
html.st-v2 .ml-card-meta .ml-dot { color: #e9b949 !important; }
html.st-v2 .ml-source { color: #6f6780 !important; border-top: 1px dashed #2b2336 !important; padding-top: 10px !important; }

/* tags: one tone per type / category */
html.st-v2 :is(.ml-badge, .v2-card-tag) {
  --tag: #a9a1b5;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 8px !important; border-radius: 7px !important;
  font: 600 10px/1 var(--v2-mono) !important; letter-spacing: .12em !important; text-transform: uppercase;
  color: var(--tag) !important;
  background: color-mix(in srgb, var(--tag) 14%, rgba(12,9,17,.86)) !important;
  border: 1px solid color-mix(in srgb, var(--tag) 38%, transparent) !important;
  box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html.st-v2 :is(.ml-badge, .v2-card-tag)::before { content: ""; width: 5px; height: 5px; border-radius: 1px; background: currentColor; }
.v2-card-tag { position: absolute; left: 12px; top: 12px; z-index: 4; max-width: calc(100% - 90px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
/* sidebar + filter pills: a colour dot per category */
html.st-v2 :is(.st-v4-rail-button, .library-group-filter, .ml-filter, .ml-product-pill, .ml-printer-pill).v2-toned::before {
  content: ""; display: inline-block; flex: none; width: 8px; height: 8px; margin-right: 10px; border-radius: 2px;
  background: var(--tag); vertical-align: middle;
}
html.st-v2 :is(.ml-filter, .ml-product-pill, .ml-printer-pill).v2-toned::before { width: 6px; height: 6px; margin-right: 6px; }
html.st-v2 #libraryPageRoot .st-v4-rail-button { border-radius: 12px !important; transition: background .2s, transform .35s var(--t-ease-x, ease) !important; }
html.st-v2 #libraryPageRoot .st-v4-rail-button:hover { background: #16111d !important; transform: translateX(3px); }
html.st-v2 #libraryPageRoot .st-v4-rail-button.active {
  background: color-mix(in srgb, var(--tag, var(--sec)) 12%, #16111d) !important;
  border-color: color-mix(in srgb, var(--tag, var(--sec)) 40%, transparent) !important;
  box-shadow: inset 3px 0 0 var(--tag, var(--sec)) !important;
}
html.st-v2 #libraryPageRoot :is(.st-v4-count, .st-v4-rail-button [class*="count"]) {
  font-family: var(--v2-mono) !important; background: #0c0911 !important; border: 1px solid #2b2336 !important; color: #a9a1b5 !important;
}
html.st-v2 #st-page-content :is(.ml-filter, .ml-product-pill, .ml-printer-pill, .library-group-filter).v2-toned:is(.active, [aria-pressed="true"]) {
  color: var(--tag) !important; border-color: color-mix(in srgb, var(--tag) 45%, transparent) !important;
  background: color-mix(in srgb, var(--tag) 12%, #120e18) !important;
}
html.st-v2 #libraryPageRoot :is(.st-v4-rail-head, .st-v4-rail-title) { font-family: var(--t-disp) !important; }
html.st-v2 #libraryPageRoot .st-v4-rail-sub, html.st-v2 #libraryPageRoot [class*="rail"] [class*="label"] { color: var(--sec) !important; font-family: var(--v2-mono) !important; letter-spacing: .16em !important; }

/* the 3D preview chip on the bed */
html.st-v2 #libraryPageRoot .thumb-3d-btn {
  z-index: 4; border-radius: 8px !important; font: 600 10px/1 var(--v2-mono) !important; letter-spacing: .12em;
  background: rgba(12,9,17,.86) !important; border: 1px solid rgba(196,163,242,.4) !important; color: #c4a3f2 !important;
}
html.st-v2 #libraryPageRoot .thumb-3d-btn:hover { background: #c4a3f2 !important; color: #150d1e !important; }
html.st-v2 #libraryPageRoot .thumb-3d-btn:hover :is(svg, span) { color: #150d1e !important; }

/* buttons say where they go */
html.st-v2 #st-page-content :is(#libraryPageRoot, .model-library) [data-create-listing][data-create-listing]:not(:disabled) {
  font-size: 13px !important; font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
  background: color-mix(in srgb, #e67ab8 10%, #120e18) !important;
  border: 1px solid color-mix(in srgb, #e67ab8 45%, transparent) !important;
  color: #f3a5cf !important; font-weight: 700 !important; border-radius: 12px !important;
}
html.st-v2 #st-page-content :is(#libraryPageRoot, .model-library) [data-create-listing]:not(:disabled)::before {
  content: "\2197"; margin-right: 8px; font-family: var(--v2-mono); color: #e67ab8;
}
html.st-v2 #st-page-content :is(#libraryPageRoot, .model-library) [data-create-listing][data-create-listing]:not(:disabled):hover {
  background: #e67ab8 !important; color: #150d1e !important; border-color: #e67ab8 !important;
  transform: translate(-3px, -3px) !important;
  box-shadow: 1px 1px 0 #b85a91, 2px 2px 0 #a44f81, 3px 3px 0 #904571 !important;
}
html.st-v2 #st-page-content :is(#libraryPageRoot, .model-library) [data-create-listing]:not(:disabled):hover::before { color: #150d1e; }
html.st-v2 #st-page-content :is(.library-clean-download, #libraryPageRoot .card-actions .btn, .ml-btn:not(.primary):not(.danger)) {
  font-family: var(--v2-mono) !important; font-size: 12px !important; letter-spacing: .04em;
  background: #16111d !important; border: 1px solid #2b2336 !important; color: #d8cfe4 !important; border-radius: 12px !important;
}
html.st-v2 .ml-btn.danger:hover, html.st-v2 #libraryPageRoot .card-delete-inline:hover { color: #ff8fb8 !important; border-color: color-mix(in srgb, #ff8fb8 45%, transparent) !important; }
html.st-v2 .ml-card-overflow, html.st-v2 .library-clean-more { border-radius: 10px !important; }
/* status badges on library cards */
html.st-v2 #libraryPageRoot .badge.done { color: #7ee0a8 !important; background: rgba(126,224,168,.1) !important; border-color: rgba(126,224,168,.3) !important; }
html.st-v2 #libraryPageRoot .badge.failed { color: #ff8fb8 !important; background: rgba(255,143,184,.1) !important; border-color: rgba(255,143,184,.3) !important; }
html.st-v2 #libraryPageRoot .badge.manual { color: #c4a3f2 !important; background: rgba(196,163,242,.1) !important; border-color: rgba(196,163,242,.3) !important; }
/* redundant identity strip under the new head */
html.st-v2 .model-library:has(> .v2-head) :is([class*="page-identity"], [class*="ml-identity"]) { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  html.st-v2 :is(#libraryPageRoot .card:hover .thumb-row img, .ml-card:hover .ml-preview img) { transform: none !important; }
}

/* ==========================================================================
   15. v3 polish — calmer nav, compact mega menu, pages + panels with structure
   ========================================================================== */

/* ---------- nav: no thick pill; a thin light rail under the tab ---------- */
@media (min-width: 1101px) {
  html.st-v2 .st-v2-ind {
    top: auto !important; bottom: -1px !important; height: 2px !important;
    border-radius: 2px !important;
    background: var(--c, #c4a3f2) !important;
    box-shadow: 0 0 12px color-mix(in srgb, var(--c, #c4a3f2) 70%, transparent) !important;
  }
  html.st-v2 .st-v2-ind::after { display: none !important; }
  html.st-v2 #st-navigation .tabs > .tab,
  html.st-v2 #st-navigation .tabs > .st-native-nav-group > .st-native-nav-trigger { padding: 0 14px !important; color: #a9a1b5 !important; }
}
html.st-v2 #st-navigation .tabs > .tab:hover,
html.st-v2 #st-navigation .tabs > .st-native-nav-group:hover > .st-native-nav-trigger { color: #f3eff7 !important; }
html.st-v2 #st-navigation .tabs > .tab.active,
html.st-v2 #st-navigation .tabs > .st-native-nav-group > .st-native-nav-trigger.active { color: #fff !important; }
html.st-v2 #st-navigation .st-v2-tabic,
html.st-v2 #st-navigation .tabs > .tab:hover .st-v2-tabic,
html.st-v2 #st-navigation .tabs > .st-native-nav-group:hover > .st-native-nav-trigger .st-v2-tabic,
html.st-v2 #st-navigation .tabs > .tab.active .st-v2-tabic,
html.st-v2 #st-navigation .tabs > .st-native-nav-group > .st-native-nav-trigger.active .st-v2-tabic {
  width: 18px !important; height: 18px !important; margin-right: 2px !important;
  background: none !important; box-shadow: none !important; border-radius: 0 !important;
  color: var(--c) !important; opacity: .8;
}
html.st-v2 #st-navigation .st-v2-tabic svg { width: 16px !important; height: 16px !important; }
html.st-v2 #st-navigation .tabs > :is(.tab, .st-native-nav-group > .st-native-nav-trigger):is(:hover, .active) .st-v2-tabic { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  html.st-v2 #st-navigation .tabs > .tab:hover .st-v2-tabic,
  html.st-v2 #st-navigation .tabs > .st-native-nav-group:hover > .st-native-nav-trigger .st-v2-tabic { transform: translateY(-2px) !important; }
}

/* ---------- mega menu: compact rows instead of big tiles ---------- */
@media (min-width: 1101px) and (hover: hover) {
  html.st-v2 #st-navigation .st-native-nav-dropdown {
    grid-template-columns: 190px repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important; padding: 18px 32px 22px !important;
  }
  .st-v2-menu-label { flex-direction: row !important; align-items: center !important; gap: 12px !important; padding: 0 !important; }
  .st-v2-menu-glyph { width: 38px !important; height: 38px !important; border-radius: 12px !important; margin: 0 !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 12%, transparent) !important; }
  .st-v2-menu-glyph svg { width: 20px !important; height: 20px !important; }
  .st-v2-menu-label strong { font-size: 17px !important; }
  .st-v2-menu-label em { display: none !important; }
  html.st-v2 #st-navigation .st-native-nav-dropdown > .tab {
    min-height: 0 !important; padding: 14px 16px !important;
    display: grid !important; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-rows: auto auto;
    column-gap: 14px !important; row-gap: 6px !important; align-items: center !important;
    border-radius: 16px !important; font-size: 15px !important;
  }
  html.st-v2 #st-navigation .st-native-nav-dropdown > .tab .st-native-nav-icon {
    grid-column: 1; grid-row: 1 / span 2; width: 44px !important; height: 44px !important; flex: none !important;
    margin: 0 !important; border-radius: 13px !important;
  }
  html.st-v2 #st-navigation .st-native-nav-dropdown .st-native-nav-icon svg.st-mi { width: 26px !important; height: 26px !important; }
  .st-v2-menu-tag { grid-column: 2; grid-row: 2; justify-self: start; margin: 0 !important; padding: 3px 7px !important; font-size: 9px !important; }
  .st-v2-menu-num { position: static !important; grid-column: 3; grid-row: 1; justify-self: end; }
  .st-v2-menu-arrow { position: static !important; grid-column: 3; grid-row: 2; justify-self: end; opacity: 1 !important; transform: none !important; color: #6f6780 !important; }
  html.st-v2 #st-navigation .st-native-nav-dropdown > .tab:hover .st-v2-menu-arrow { color: var(--c) !important; transform: translate(2px, -2px) !important; }
  html.st-v2 #st-navigation .st-native-nav-dropdown > .tab:hover,
  html.st-v2 #st-navigation .st-native-nav-dropdown > .tab:focus-visible { transform: translate(-3px, -3px) !important;
    box-shadow: 1px 1px 0 color-mix(in srgb, var(--c) 40%, #0c0911), 2px 2px 0 color-mix(in srgb, var(--c) 30%, #0c0911), 3px 3px 0 color-mix(in srgb, var(--c) 20%, #0c0911) !important; }
}

/* ---------- page canvas: a soft light in the section tone, grid fades out ---------- */
.v2-liquid::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 560px; pointer-events: none;
  background: radial-gradient(900px 400px at 18% -12%, color-mix(in srgb, var(--sec, #c4a3f2) 14%, transparent), transparent 70%),
              radial-gradient(700px 300px at 92% -20%, color-mix(in srgb, var(--sec, #c4a3f2) 7%, transparent), transparent 70%);
}

/* ---------- page head: bigger title, ruler underneath with a "you are here" segment ---------- */
html.st-v2 .v2-head { position: relative; border-bottom: 0 !important; padding-bottom: 34px !important; margin-bottom: 30px !important; gap: 18px !important; }
html.st-v2 .v2-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; pointer-events: none;
  background:
    linear-gradient(90deg, var(--sec), transparent) 0 100% / 180px 2px no-repeat,
    repeating-linear-gradient(90deg, #3a3048 0 1px, transparent 1px 64px) 0 100% / 100% 12px no-repeat,
    repeating-linear-gradient(90deg, #2b2336 0 1px, transparent 1px 8px) 0 100% / 100% 6px no-repeat,
    linear-gradient(#211a2a, #211a2a) 0 100% / 100% 1px no-repeat;
}
html.st-v2 .v2-head .v2-crumb { display: inline-flex; align-items: center; gap: 10px; }
html.st-v2 .v2-head .v2-crumb::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--sec); box-shadow: 0 0 10px color-mix(in srgb, var(--sec) 70%, transparent); }
html.st-v2 .v2-page h1.v2-title, html.st-v2 .v2-title { font-size: clamp(30px, 3vw, 42px) !important; }
.v2-head-tile { width: 72px !important; height: 72px !important; border-radius: 20px !important; }
.v2-head-tile svg { width: 40px !important; height: 40px !important; }

/* ---------- panels: modules with a lit top edge; the one you work in lights up ---------- */
html.st-v2 #st-page-content :is([class*="card"],[class*="panel"],[class*="Panel"],aside,[class*="sidebar"],.composer,.maker-card,.ss-pool,.tgcompact-metric,#tgWorkerControl,.membership-current-strip):not([class*="thumb"]):not([class*="img"]):not([class*="image"]):not([class*="preview"]):not([class*="icon"]):not([class*="avatar"]):not([class*="logo"]):not([class*="count"]):not(img,svg,canvas,video,button,a,input,select,textarea,span,i,em,strong,small,label):not(.v2-own *):not(:is([class*="card"],[class*="panel"],[class*="Panel"],aside,.composer,.maker-card,.ss-pool) *):not(#libraryPageRoot .card):not(.ml-card) {
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--sec) 55%, transparent), transparent) 50% 0 / 72% 1px no-repeat,
    linear-gradient(180deg, #161119, #110d16 70%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 28px 56px -36px rgba(0,0,0,.85) !important;
  transition: border-color .3s ease, box-shadow .3s ease !important;
}
html.st-v2 #st-page-content :is(.maker-card, .ss-pool, .composer, .ls-panel, .telegram-panel, .ml-org-panel, .settings-grid > .card, #tgWorkerControl):focus-within {
  border-color: color-mix(in srgb, var(--sec) 42%, #2b2336) !important;
}
/* panel titles: clear hierarchy */
html.st-v2 #st-page-content :is(.maker-card, .ss-pool, .ss-card, .ls-panel, .telegram-panel, .card, [class*="panel"]) > :is(h2, h3, header h2, header h3, [class*="title"]):not(.v2-own *) {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif !important; font-size: 17px !important; font-weight: 700 !important; letter-spacing: -.015em !important; color: #f3eff7 !important;
}
/* small caps labels inside panels: mono, calm */
html.st-v2 #st-page-content :is([class*="panel"], .card, .maker-card) :is(.field-label, .setting-label, [class$="-kicker"], [class$="-eyebrow"]):not(.v2-own *) {
  font-family: var(--v2-mono) !important; font-size: 10.5px !important; letter-spacing: .16em !important; text-transform: uppercase; color: #8e869b !important;
}
/* big numbers in metric tiles */
html.st-v2 #st-page-content .tgcompact-metric strong { font-size: 28px !important; line-height: 1.1 !important; color: #f3eff7 !important; }
html.st-v2 #st-page-content .tgcompact-metric { padding: 18px 20px !important; }

/* inputs a touch roomier */
html.st-v2 #st-page-content :is(input[type="text"], input[type="search"], input[type="email"], input[type="number"], input[type="url"], input:not([type]), select):not(.v2-own *) { min-height: 40px; }

/* dropzone: the print bed, in the section tone */
html.st-v2 #st-page-content #dropzone {
  border: 1.5px dashed color-mix(in srgb, var(--sec) 35%, #2b2336) !important; border-radius: 18px !important;
  background:
    radial-gradient(ellipse 60% 45% at 50% 100%, color-mix(in srgb, var(--sec) 12%, transparent), transparent 70%),
    repeating-linear-gradient(0deg, rgba(196,163,242,.07) 0 1px, transparent 1px 7px), #0c0911 !important;
}
html.st-v2 #st-page-content #dropzone:is(:hover, .dragover, .drag-over, .is-dragover, .dragging) { border-color: var(--sec) !important; }
html.st-v2 #st-page-content .drop-upload-icon { color: var(--sec) !important; border-color: color-mix(in srgb, var(--sec) 35%, #2b2336) !important; background: color-mix(in srgb, var(--sec) 10%, #120e18) !important; }

/* numbered modules: "01 · Panel title" in the display face, corner marks on the panel */
html.st-v2 #st-page-content .v2-pn:is(.v2-pn, #v2-x#v2-y#v2-z) {
  background:
    linear-gradient(#3a3048, #3a3048) left 8px top 8px / 10px 1px no-repeat,
    linear-gradient(#3a3048, #3a3048) left 8px top 8px / 1px 10px no-repeat,
    linear-gradient(#3a3048, #3a3048) right 8px top 8px / 10px 1px no-repeat,
    linear-gradient(#3a3048, #3a3048) right 8px top 8px / 1px 10px no-repeat,
    linear-gradient(#3a3048, #3a3048) left 8px bottom 8px / 10px 1px no-repeat,
    linear-gradient(#3a3048, #3a3048) left 8px bottom 8px / 1px 10px no-repeat,
    linear-gradient(#3a3048, #3a3048) right 8px bottom 8px / 10px 1px no-repeat,
    linear-gradient(#3a3048, #3a3048) right 8px bottom 8px / 1px 10px no-repeat,
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--sec) 55%, transparent), transparent) 50% 0 / 72% 1px no-repeat,
    linear-gradient(180deg, #161119, #110d16 70%) !important;
}
html.st-v2 #st-page-content .v2-ph:is(.v2-ph, #v2-x#v2-y#v2-z) {
  font-family: var(--t-disp) !important; font-size: 17px !important; font-weight: 600 !important; letter-spacing: -.02em !important; color: #f3eff7 !important;
}
html.st-v2 #st-page-content .v2-ph::before {
  content: attr(data-v2-n); display: inline-block; margin-right: 10px; vertical-align: 2px;
  font: 500 11px/1 var(--v2-mono); letter-spacing: .12em; color: var(--sec);
}
html.st-v2 #st-page-content .v2-ph:is([class*="panel-title"], [class*="-title"]):has(> :is(div, span, svg)) { display: flex; align-items: center; }

/* telegram: metrics in one even row, colours only where they mean something */
html.st-v2 .tgcompact-summary { display: grid !important; grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)) !important; gap: 14px !important; align-items: stretch !important; }
html.st-v2 .tgcompact-summary > .tgcompact-metric { width: auto !important; min-width: 0 !important; margin: 0 !important; }
html.st-v2 .tgcompact-metric.failed strong { color: #ff8fb8 !important; }
html.st-v2 #tgcompactQueue { color: #ff7a2e !important; }
@media (max-width: 900px) { html.st-v2 .tgcompact-summary { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* 3D Library: its own header (built by library-clean.js) gets the page-head language */
html.st-v2 .library-clean-head { position: relative; padding-bottom: 30px !important; margin-bottom: 26px !important; }
html.st-v2 .library-clean-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; pointer-events: none;
  background:
    linear-gradient(90deg, var(--sec), transparent) 0 100% / 180px 2px no-repeat,
    repeating-linear-gradient(90deg, #3a3048 0 1px, transparent 1px 64px) 0 100% / 100% 12px no-repeat,
    repeating-linear-gradient(90deg, #2b2336 0 1px, transparent 1px 8px) 0 100% / 100% 6px no-repeat,
    linear-gradient(#211a2a, #211a2a) 0 100% / 100% 1px no-repeat;
}
html.st-v2 .library-clean-eyebrow {
  display: flex !important; width: fit-content; align-items: center; gap: 10px;
  font: 500 12px/1 var(--v2-mono) !important; letter-spacing: .16em !important; color: var(--sec) !important;
}
html.st-v2 .library-clean-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--sec); box-shadow: 0 0 10px color-mix(in srgb, var(--sec) 70%, transparent); }
html.st-v2 .library-clean-head h1 { font-size: clamp(30px, 3vw, 42px) !important; margin: 12px 0 6px !important; }
html.st-v2 .library-clean-head p { color: #8e869b !important; }
/* rail rows read left to right: dot · name · count */
html.st-v2 #libraryPageRoot .st-v4-rail-button {
  display: flex !important; align-items: center !important; justify-content: flex-start !important; text-align: left !important; gap: 0 !important;
}
html.st-v2 #libraryPageRoot .st-v4-rail-button > :last-child:not(:first-child) { margin-left: auto !important; }

/* ==========================================================================
   16. Calm + consistent (v2.11) — fewer ornaments, one header language,
       flat nested boxes, a proper phone layout
   ========================================================================== */
/* ornaments off: panel numbers, corner marks, ruler ticks */
html.st-v2 #st-page-content .v2-ph::before { content: none !important; display: none !important; }
html.st-v2 #st-page-content .v2-ph:is(.v2-ph, #v2-x#v2-y#v2-z) { font-family: "Plus Jakarta Sans", system-ui, sans-serif !important; font-size: 17px !important; font-weight: 700 !important; letter-spacing: -.015em !important; }
html.st-v2 #st-page-content .v2-pn:is(.v2-pn, #v2-x#v2-y#v2-z) {
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--sec) 40%, transparent), transparent) 50% 0 / 70% 1px no-repeat,
    #120e18 !important;
}
html.st-v2 #st-page-content .composer:is(.composer, #v2-x#v2-y#v2-z) { background: #120e18 !important; }

/* one hairline under every page head: a short section-colour segment + a quiet line */
html.st-v2 :is(.v2-head, .library-clean-head, .maker-header)::after {
  content: "" !important; position: absolute; left: 0; right: 0; bottom: 0; height: 2px !important; pointer-events: none;
  background:
    linear-gradient(90deg, var(--sec), transparent) 0 100% / 140px 2px no-repeat,
    linear-gradient(#211a2a, #211a2a) 0 100% / 100% 1px no-repeat !important;
}
.v2-head-tile { width: 56px !important; height: 56px !important; border-radius: 16px !important; }
.v2-head-tile svg { width: 32px !important; height: 32px !important; }

/* same header language on the pages that build their own head */
html.st-v2 .maker-header { position: relative; padding: 0 0 26px !important; margin: 0 0 26px !important; border: 0 !important; background: none !important; box-shadow: none !important; text-align: left !important; }
html.st-v2 :is(.st-maker-brand, .chat-brand) {
  display: inline-flex !important; align-items: center; gap: 10px; padding: 0 !important; border: 0 !important; background: none !important;
  font: 500 12px/1 var(--v2-mono) !important; letter-spacing: .16em !important; text-transform: uppercase; color: var(--sec) !important;
}
html.st-v2 :is(.st-maker-brand-dot, .chat-brand-dot) { width: 7px !important; height: 7px !important; border-radius: 2px !important; background: var(--sec) !important; box-shadow: 0 0 10px color-mix(in srgb, var(--sec) 70%, transparent) !important; }
html.st-v2 .st-maker-brand-title { font: inherit !important; letter-spacing: inherit !important; color: inherit !important; }
html.st-v2 :is(.st-maker-brand-space, .chat-brand > span:last-child) { display: none !important; }
html.st-v2 .maker-header h1.maker-title { font-size: clamp(28px, 3vw, 42px) !important; line-height: 1.08 !important; margin: 14px 0 8px !important; }
html.st-v2 :is(.maker-subtitle, .library-clean-head p) { color: #8e869b !important; font-size: 14px !important; margin: 0 !important; }
html.st-v2 :is(.etsy-v2-kicker, .membership-kicker) { color: var(--sec) !important; }

/* boxes inside boxes go flat: one level of framing per area */
html.st-v2 #st-page-content :is([class*="card"],[class*="panel"],[class*="Panel"]) :is([class*="card"],[class*="panel"],[class*="Panel"]):not(button,a,img,svg,span,input,select,textarea,label,i,strong,small,em,[class*="thumb"],[class*="preview"],[class*="img"],[class*="icon"],[class*="avatar"],[class*="badge"],[class*="count"],[class*="menu"],[class*="popover"],[class*="dropdown"],[class*="modal"],[class*="dialog"],[class*="tooltip"],[class*="toast"],[class*="overlay"]):not(.v2-own *):not(#libraryPageRoot .card):not(.ml-card):not(.ml-card *):not(#libraryPageRoot .card *) {
  background: rgba(255,255,255,.018) !important; box-shadow: none !important; border-color: #211a2a !important;
}

/* the pixel buddy stays out of the way */
@media (max-width: 760px) {
  body:not([data-st-page="home"]) :is(.v2-buddy, .v2-buddy-peek) { display: none !important; }
}

/* ---------- phone layout ---------- */
@media (max-width: 760px) {
  html.st-v2 .v2-head { gap: 12px !important; padding-bottom: 18px !important; margin-bottom: 18px !important; }
  html.st-v2 .v2-head-row { flex-wrap: nowrap !important; gap: 12px !important; align-items: center !important; }
  html.st-v2 .v2-head-tile { width: 42px !important; height: 42px !important; border-radius: 12px !important; }
  html.st-v2 .v2-head-tile svg { width: 26px !important; height: 26px !important; }
  html.st-v2 .v2-page h1.v2-title, html.st-v2 .v2-title,
  html.st-v2 .maker-header h1.maker-title, html.st-v2 .library-clean-head h1 { font-size: 26px !important; line-height: 1.1 !important; }
  html.st-v2 :is(.maker-subtitle, .library-clean-head p) { display: none !important; }
  html.st-v2 .maker-header, html.st-v2 .library-clean-head { padding-bottom: 18px !important; margin-bottom: 18px !important; }
  html.st-v2 .v2-crumb, html.st-v2 :is(.st-maker-brand, .chat-brand, .library-clean-eyebrow) { font-size: 10.5px !important; letter-spacing: .14em !important; }
  html.st-v2 #st-page-content :is(.maker-card, .ss-pool, .ss-card, .ls-panel, .telegram-panel, .card, .tgcompact-metric, #tgWorkerControl, .composer) { border-radius: 18px !important; }

  /* 3D Library: compact toolbar, category chips in one line, two-up grid */
  html.st-v2 .library-clean-toolbar { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto !important; gap: 8px !important; }
  html.st-v2 .library-clean-search { grid-column: 1 / -1 !important; }
  html.st-v2 .library-clean-view { display: none !important; }
  html.st-v2 :is(.library-clean-select, .library-clean-upload) { min-height: 42px !important; height: 42px !important; width: auto !important; min-width: 0 !important; font-size: 13px !important; }
  html.st-v2 .library-clean-upload { padding: 0 14px !important; white-space: nowrap !important; }
  html.st-v2 #stLibraryV4Rail { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; gap: 8px !important; padding: 8px !important; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  html.st-v2 #stLibraryV4Rail::-webkit-scrollbar { display: none; }
  html.st-v2 #stLibraryV4Rail :is(.st-v4-section-label, .st-v4-rail-head, [class*="section-label"]) { display: none !important; }
  html.st-v2 #libraryPageRoot .st-v4-rail-button { flex: none !important; width: auto !important; min-height: 36px !important; padding: 0 12px !important; white-space: nowrap !important; }
  html.st-v2 #libraryPageRoot .st-v4-rail-button > :last-child:not(:first-child) { margin-left: 8px !important; }
  html.st-v2 #libraryPageRoot #grid.grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  html.st-v2 #libraryPageRoot .card { padding: 6px !important; border-radius: 16px !important; }
  html.st-v2 #libraryPageRoot .thumb-row { border-radius: 12px !important; }
  html.st-v2 #libraryPageRoot .library-clean-name { font-size: 12px !important; }
  html.st-v2 #libraryPageRoot :is(.v2-card-tag, .library-clean-bambu) { display: none !important; }
  html.st-v2 #libraryPageRoot .thumb-3d-btn { transform: scale(.85); transform-origin: top right; }
  html.st-v2 #st-page-content #libraryPageRoot [data-create-listing][data-create-listing]:not(:disabled) { font-size: 12px !important; min-height: 36px !important; padding: 0 8px !important; }
  html.st-v2 #st-page-content #libraryPageRoot [data-create-listing]:not(:disabled)::before { display: none !important; }
  html.st-v2 #st-page-content .library-clean-download { font-size: 11px !important; min-height: 34px !important; padding: 0 8px !important; }
  /* Model Library: tighter cards */
  html.st-v2 .ml-card .ml-card-body { padding: 10px 10px 12px !important; }
  html.st-v2 .ml-card-body h2 { font-size: 14px !important; }
  html.st-v2 .ml-source { display: none !important; }
}
@media (max-width: 760px) {
  html.st-v2 :is(.library-clean-toolbar > select, .library-clean-toolbar > .library-clean-upload) { grid-column: auto !important; grid-row: 2 !important; }
  html.st-v2 #st-page-content .library-clean-download { white-space: nowrap !important; letter-spacing: 0 !important; font-size: 10.5px !important; }
  html.st-v2 .v2-page h1.v2-hero-title, html.st-v2 .v2-hero-title { font-size: 40px !important; }
}

/* ==========================================================================
   17. Hero mascot v2 — print head, heated plate, lift-off, starfield,
       parallax toward the cursor, gloss on the fresh print
   ========================================================================== */
.v2-hero-visual { --pdx: 0; --pdy: 0; }
.v2-stars {
  position: absolute; inset: -4%; pointer-events: none; border-radius: 50%;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 72%);
  mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 72%);
  translate: calc(var(--pdx) * -14px) calc(var(--pdy) * -10px);
  transition: translate .6s cubic-bezier(.22,1,.36,1);
}
@media (prefers-reduced-motion: no-preference) {
  .v2-stars { animation: v2-stars-drift 60s linear infinite alternate; }
}
@keyframes v2-stars-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-3%, 2%, 0); } }
.v2-hero-stage { translate: calc(var(--pdx) * 16px) calc(var(--pdy) * 12px); transition: translate .6s cubic-bezier(.22,1,.36,1); }
.v2-hero-visual .v2-hud { translate: calc(var(--pdx) * 6px) calc(var(--pdy) * 4px); transition: translate .6s cubic-bezier(.22,1,.36,1); }
.v2-hero-visual .v2-hero-grid { translate: calc(var(--pdx) * -6px) calc(var(--pdy) * -4px); transition: translate .6s cubic-bezier(.22,1,.36,1); }
.v2-cat { rotate: calc(var(--pdx) * 4deg); transition: rotate .6s cubic-bezier(.22,1,.36,1), translate 1.1s cubic-bezier(.22,1,.36,1); }
.v2-cat.is-lifted { translate: 0 -5%; }

/* build plate: a disc with a grid, glows hot while printing, cools after */
.v2-plate {
  --heat: 0;
  position: absolute; left: 19%; right: 19%; bottom: 4%; height: 11%; pointer-events: none; border-radius: 50%;
  background:
    radial-gradient(closest-side, color-mix(in srgb, #ff7a2e calc(var(--heat) * 55%), rgba(196,163,242,.22)), transparent 72%);
  box-shadow: 0 0 0 1px rgba(196,163,242,.12) inset;
}
.v2-plate i {
  position: absolute; inset: 0; border-radius: 50%;
  background-image: linear-gradient(rgba(196,163,242,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(196,163,242,.22) 1px, transparent 1px);
  background-size: 14px 6px;
  -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 40%, transparent 100%);
  opacity: calc(.45 + var(--heat) * .4);
}
.v2-hero-stage::before { display: none !important; }

/* print head: sits on the print line, sweeps left and right */
.v2-nozzle {
  position: absolute; left: 50%; top: 100%; width: 40px; height: 46px; margin: -44px 0 0 -20px;
  pointer-events: none; opacity: 0; transition: opacity .3s; z-index: 4;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.6));
}
.v2-nozzle.is-on { opacity: 1; }
.v2-nozzle svg { width: 100%; height: 100%; display: block; }
.v2-nozzle .nz-rail { fill: #3a3048; }
.v2-nozzle .nz-block { fill: #1b1523; stroke: #4a3d5c; stroke-width: 1; }
.v2-nozzle .nz-heat { fill: #ff7a2e; }
.v2-nozzle .nz-brass { fill: #d9b36c; }
.v2-nozzle .nz-tip { fill: #ffd2a8; filter: drop-shadow(0 0 4px #ff7a2e); }
@media (prefers-reduced-motion: no-preference) {
  .v2-nozzle.is-on .nz-heat { animation: v2-heat .4s steps(2) infinite; }
}
@keyframes v2-heat { 50% { fill: #ffb27a; } }

/* gloss: a light line runs over the finished print now and then (masked by the cat) */
.v2-cat-gloss {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; opacity: 0;
  -webkit-mask: url(/static/img/v2/space-cat.webp?v=1) center / contain no-repeat;
  mask: url(/static/img/v2/space-cat.webp?v=1) center / contain no-repeat;
  mix-blend-mode: screen;
}
.v2-cat-gloss i {
  position: absolute; top: -20%; bottom: -20%; left: 0; width: 38%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.0) 30%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 70%, transparent);
  transform: translateX(-120%) skewX(-12deg);
}
@media (prefers-reduced-motion: no-preference) {
  .v2-cat.is-float .v2-cat-gloss { opacity: 1; }
  .v2-cat.is-float .v2-cat-gloss i { animation: v2-gloss 7s cubic-bezier(.6,0,.2,1) 1s infinite; }
  .v2-cat.is-boost { animation: v2-boost .9s cubic-bezier(.22,1,.36,1) !important; }
}
@keyframes v2-gloss { 0% { transform: translateX(-120%) skewX(-12deg); } 22%, 100% { transform: translateX(330%) skewX(-12deg); } }
@keyframes v2-boost { 0% { transform: translateY(0); } 35% { transform: translateY(-9%) rotate(-3deg); } 100% { transform: translateY(0); } }

/* particles canvas (sparks + jetpack) */
.v2-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }
.v2-hero-visual .v2-hud { z-index: 6; }
@media (prefers-reduced-motion: reduce) {
  .v2-stars, .v2-hero-stage, .v2-hud, .v2-hero-grid, .v2-cat { translate: none !important; rotate: none !important; }
  .v2-fx, .v2-nozzle, .v2-cat-gloss { display: none !important; }
}
/* eyes follow the cursor + blink */
.v2-eye { position: absolute; z-index: 2; overflow: hidden; border-radius: 50%; pointer-events: none; opacity: 0; }
.v2-cat.is-done .v2-eye { opacity: 1; }
.v2-eye i {
  position: absolute; display: block;
  background: url(/static/img/v2/space-cat.webp?v=1) center / contain no-repeat;
  transform: translate(var(--ex, 0px), var(--ey, 0px));
  transition: transform .18s ease-out;
}
.v2-lid {
  position: absolute; z-index: 3; pointer-events: none; border-radius: 46% 46% 50% 50%;
  background: linear-gradient(180deg, #43383a, #2c2626 75%, #211c1c);
  box-shadow: inset 0 -2px 0 #161212;
  transform: scaleY(0); transform-origin: 50% 0; transition: transform .07s ease-in;
}
.v2-cat.is-blink .v2-lid { transform: scaleY(1); }
.v2-cat:not(.is-done) .v2-lid { display: none; }
.v2-nozzle { width: 60px !important; height: 69px !important; margin: -66px 0 0 -30px !important; }
@media (prefers-reduced-motion: reduce) { .v2-eye { display: none !important; } }

/* ==========================================================================
   18. Leftovers from the old theme: 3D preview window, dialogs, menus
   (spacetools-motion-v2.js also remaps old colours still living in the
   pages' own <style> blocks — see setupRecolor)
   ========================================================================== */
html.st-v2 .stl-preview-overlay { background: rgba(6, 4, 10, .78) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html.st-v2 .st-preview-pro-box, html.st-v2 .stl-preview-box {
  background: #120e18 !important; border: 1px solid #2b2336 !important; border-radius: 24px !important;
  box-shadow: 0 40px 120px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}
html.st-v2 .st-preview-pro-header { border-bottom: 1px solid #211a2a !important; margin-bottom: 14px !important; }
html.st-v2 .st-preview-pro-icon {
  background: color-mix(in srgb, var(--sec) 10%, #120e18) !important; border: 1px solid color-mix(in srgb, var(--sec) 32%, #2b2336) !important;
  color: var(--sec) !important; box-shadow: none !important; border-radius: 14px !important;
}
html.st-v2 .st-preview-pro-kicker { font-family: var(--v2-mono) !important; color: var(--sec) !important; letter-spacing: .16em !important; }
html.st-v2 .st-preview-pro-title-text :is(h2, h3, strong, [id$="Title"]), html.st-v2 #libPreviewTitle { font-family: var(--t-disp) !important; font-weight: 600 !important; letter-spacing: -.02em !important; color: #f3eff7 !important; }
html.st-v2 :is(.st-preview-pro-close, .st-preview-pro-rename, .stl-preview-close) {
  background: #16111d !important; border: 1px solid #2b2336 !important; color: #d8cfe4 !important; box-shadow: none !important;
}
html.st-v2 :is(.st-preview-pro-close, .stl-preview-close):hover { border-color: #ff8fb8 !important; color: #ff8fb8 !important; }
html.st-v2 .st-preview-pro-stage, html.st-v2 .stl-preview-canvas-wrap {
  border: 1px solid #211a2a !important; border-radius: 18px !important;
  background:
    radial-gradient(ellipse 55% 40% at 50% 100%, color-mix(in srgb, var(--sec) 16%, transparent), transparent 70%),
    radial-gradient(circle at 50% 42%, #1b1523, #0c0911 72%) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .02) !important;
}
html.st-v2 .st-preview-pro-stage::before, html.st-v2 .st-preview-pro-stage::after {
  background-image: linear-gradient(rgba(196,163,242,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(196,163,242,.07) 1px, transparent 1px) !important;
  border-color: transparent !important; box-shadow: none !important;
}
html.st-v2 .st-preview-pro-stage-label { font-family: var(--v2-mono) !important; color: #6f6780 !important; letter-spacing: .16em !important; }
html.st-v2 .st-preview-pro-stage-dot { background: #ff7a2e !important; box-shadow: 0 0 8px rgba(255, 122, 46, .8) !important; }
html.st-v2 .stl-preview-status { color: #8e869b !important; font-family: var(--v2-mono) !important; font-size: 12px !important; }
html.st-v2 .st-preview-pro-footer { background: transparent !important; border: 1px solid #211a2a !important; border-radius: 16px !important; box-shadow: none !important; }
html.st-v2 .stl-preview-hint { font-family: var(--v2-mono) !important; color: #6f6780 !important; font-size: 11px !important; }
html.st-v2 .st-view-control {
  background: #0c0911 !important; border: 1px solid #2b2336 !important; border-radius: 12px !important; box-shadow: none !important;
}
html.st-v2 .st-view-control > span { font-family: var(--v2-mono) !important; color: #c4a3f2 !important; letter-spacing: .12em !important; }
html.st-v2 .st-view-control select { background: transparent !important; color: #f3eff7 !important; border: 0 !important; box-shadow: none !important; }
html.st-v2 .st-view-control select option { background: #120e18 !important; color: #f3eff7 !important; }
html.st-v2 .st-view-control::after { border-color: #8e869b !important; color: #8e869b !important; }

/* any leftover dialog / drawer / popover surface in the page follows the palette */
html.st-v2 #st-page-content :is([class*="modal"], [class*="dialog"], [class*="drawer"], [class*="popover"], [class*="-menu-panel"], [class*="dropdown-menu"]):is(div, section, aside, form):not([class*="overlay"]):not([class*="backdrop"]):not(.v2-own *):not(:is([class*="modal"], [class*="dialog"], [class*="drawer"], [class*="popover"]) *) {
  background-color: #120e18 !important; background-image: none !important; border-color: #2b2336 !important;
}
html.st-v2 #st-page-content :is([class$="-overlay"], [class*="-overlay "], [class*="backdrop"]):not([class*="thumb"]):not(.v2-own *):not(.stl-preview-overlay) { background-color: rgba(6, 4, 10, .74) !important; }
html.st-v2 #st-navigation .brand, html.st-v2 #st-navigation .brand-logo-wrap { color: #f3eff7 !important; }

/* 3D preview: win against the page's own ID-level rules even if the colour pass has not run yet */
html.st-v2 body :is(#libPreviewModal, [id$="PreviewModal"], [id$="previewModal"]) { background: rgba(6, 4, 10, .78) !important; }
html.st-v2 body :is(#libPreviewModal, [id$="PreviewModal"], [id$="previewModal"]) :is(.st-preview-pro-box, .st-v4-preview-panel, .st-preview-modal-card, .stl-preview-modal-dialog, .st-modal-card, .stl-preview-box) {
  background: #120e18 !important; border: 1px solid #2b2336 !important;
  box-shadow: 0 40px 120px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}
html.st-v2 body :is(#libPreviewModal, [id$="PreviewModal"], [id$="previewModal"], #libPreviewCanvasWrap) :is(.st-preview-pro-stage, .stl-preview-canvas-wrap),
html.st-v2 body #libPreviewCanvasWrap {
  background:
    radial-gradient(ellipse 55% 40% at 50% 100%, color-mix(in srgb, var(--sec) 16%, transparent), transparent 70%),
    radial-gradient(circle at 50% 42%, #1b1523, #0c0911 72%) !important;
  border-color: #211a2a !important;
}
html.st-v2 body :is(#libPreviewModal, [id$="PreviewModal"], [id$="previewModal"], #libPreviewCanvasWrap) .st-preview-pro-stage-label { background: rgba(12, 9, 17, .7) !important; border-color: #2b2336 !important; color: #8e869b !important; }
html.st-v2 body :is(#libPreviewModal, [id$="PreviewModal"], [id$="previewModal"]) .st-preview-pro-stage-dot { background: #ff7a2e !important; box-shadow: 0 0 8px rgba(255, 122, 46, .8) !important; }
html.st-v2 body :is(#libPreviewModal, [id$="PreviewModal"], [id$="previewModal"]) :is(.st-preview-pro-footer, .st-preview-footer, .stl-preview-footer) { background: transparent !important; border-color: #211a2a !important; box-shadow: none !important; }
html.st-v2 body :is(#libPreviewModal, [id$="PreviewModal"], [id$="previewModal"]) :is(.st-preview-pro-header, .stl-preview-header) { border-color: #211a2a !important; }
html.st-v2 body :is(#libPreviewModal, [id$="PreviewModal"], [id$="previewModal"]) :is(button, .st-view-control):not(.st-preview-pro-close):not(.stl-preview-close) { background-color: #16111d !important; border-color: #2b2336 !important; }
html.st-v2 body :is(#libPreviewModal, [id$="PreviewModal"], [id$="previewModal"]) :is(.st-preview-pro-close, .stl-preview-close) { background: #16111d !important; border-color: #2b2336 !important; color: #d8cfe4 !important; }

/* ==========================================================================
   19. Hero mascot rig (v2.16) — spacetools-hero-cat.js drives the cat with
       springs every frame (float, lean, bounce, tail mesh, ear flicks, eyes),
       so the CSS float/transition/boost animations step aside when it runs.
   ========================================================================== */
.v2-cat.is-rig { animation: none !important; rotate: none !important; translate: none !important; transition: none !important; transform-origin: 50% 88%; }
.v2-hero-visual.is-rig :is(.v2-stars, .v2-hero-stage, .v2-hud, .v2-hero-grid) { transition: none !important; }
/* tail + ear tips (WebGL), behind the body; bigger than the cat box so the tail can swing out */
.v2-cat-tail { position: absolute; left: -14%; top: -14%; width: 128%; height: 128%; max-width: none !important; max-height: none !important; pointer-events: none; }
html.v2-js .v2-cat:not(.is-done) .v2-cat-tail { clip-path: inset(100% 0 0 0); }
/* eyes: iris, pupil, glint and lids over the body */
.v2-cat-eyes { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; opacity: 0; transition: opacity .35s ease; }
.v2-cat.is-done .v2-cat-eyes { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .v2-cat-eyes, .v2-cat-tail { display: none !important; } }

/* ==========================================================================
   20. Hero intro v2.17 — hologram in (no wireframe, no print head):
       a glowing silhouette, a soft scan light, the cat materialises below it
   ========================================================================== */
.v2-cat .v2-cat-wire { display: none !important; }
.v2-cat.is-holo .v2-nozzle { display: none !important; }
.v2-cat-holo {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  filter: drop-shadow(0 0 10px rgba(196,163,242,.55)) drop-shadow(0 0 2px rgba(226,209,250,.6));
}
.v2-cat:not(.is-holo) .v2-cat-holo { opacity: 0 !important; transition: opacity .45s ease; }
/* the cat itself, turned into lavender light (details stay readable), plus drifting scan lines */
.v2-cat-holo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  filter: grayscale(1) brightness(1.35) contrast(1.15) sepia(1) hue-rotate(218deg) saturate(2.4);
  opacity: .8; mix-blend-mode: screen;
}
.v2-cat-holo i {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.2) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, rgba(226,209,250,.28), rgba(196,163,242,.14) 55%, rgba(108,195,232,.18));
  -webkit-mask: url(/static/img/v2/space-cat.webp?v=1) center / contain no-repeat;
  mask: url(/static/img/v2/space-cat.webp?v=1) center / contain no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  .v2-cat.is-holo .v2-cat-holo i { animation: v2-holo-lines .5s linear infinite; }
}
@keyframes v2-holo-lines { to { background-position: 0 4px, 0 0; } }
/* the scan light: a thin bright line with a soft haze above it */
.v2-cat.is-holo .v2-cat-band {
  left: 6%; right: 6%; height: 2px; margin-top: -1px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(226,209,250,.8) 20%, #fff 50%, rgba(226,209,250,.8) 80%, transparent);
  box-shadow: 0 0 14px 3px rgba(196,163,242,.6);
}
.v2-cat.is-holo .v2-cat-band::before {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: 2px; height: 56px; pointer-events: none;
  background: radial-gradient(60% 100% at 50% 100%, rgba(196,163,242,.26), transparent 70%);
}

/* ==========================================================================
   21. v2.18 — clean hero, space backdrop, lifts never clipped, warmer hero
   ========================================================================== */
/* no technical readouts around the cat */
.v2-hero-visual .v2-hud { display: none !important; }

/* hover lifts (extrude) were cut at the top: the reveal left clip-path: inset(0) on each block,
   and the shelf clips for its marquee. The clip now ends outside the box; the shelf has room. */
@keyframes v2-print-in { from { clip-path: inset(100% -40px -120px -40px); } to { clip-path: inset(-40px -40px -120px -40px); } }
.v2-shelf { padding-block: 12px 16px; margin-top: 36px !important; margin-bottom: -16px; }

/* hero: the main action in the cat's suit orange, a warm title, coloured readout labels */
.v2-hero .v2-btn-primary {
  background: linear-gradient(180deg, #fb9e46, #de712b) !important; border-color: #de712b !important;
  color: #1a0d05 !important;
}
.v2-hero .v2-btn-primary:hover {
  background: linear-gradient(180deg, #ffb066, #e97d33) !important;
  box-shadow: 1px 1px 0 #b8581c, 2px 2px 0 #a24d18, 3px 3px 0 #8c4214, 0 18px 36px -16px rgba(222,113,43,.6) !important;
}
.v2-hero-title span {
  background: linear-gradient(100deg, #fb9e46 0%, #f2a0b8 32%, #c4a3f2 58%, #f3eff7 64%, #c4a3f2 70%, #fb9e46 100%) !important;
  background-size: 250% 100% !important;
  -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important;
}
.v2-readout div:nth-child(1) dt { color: #c4a3f2 !important; }
.v2-readout div:nth-child(2) dt { color: #fb9e46 !important; }
.v2-readout div:nth-child(3) dt { color: #6cc3e8 !important; }
.v2-readout div:nth-child(4) dt { color: #e9b949 !important; }

/* space backdrop (layer built by spacetools-motion-v2.js, under the page content)
   v2.19: flat vector planets — one flat colour each, at most a couple of hard-edged bands
   or craters, thin flat rings; no gradients, glows or shadows */
.v2-space { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; contain: strict; }
.v2-space.is-home { opacity: .85; }
.v2-space:not(.is-home) { opacity: .5; }
.v2-pw { position: absolute; will-change: transform; }
.v2-pw .pb { position: absolute; inset: 0; z-index: 1; border-radius: 50%; overflow: hidden; background: var(--c); }
.v2-pw .tx {
  position: absolute; inset: 0;
  background: linear-gradient(-24deg, transparent 36%, var(--st, transparent) 36% 50%, transparent 50% 60%, var(--st, transparent) 60% 65%, transparent 65%);
}
.v2-pw .sh { display: none; }
.v2-pw .rg { position: absolute; left: -55%; top: -55%; width: 210%; height: 210%; border-radius: 50%; border: var(--rs, 2px) solid var(--ring); }
.v2-pw .rg-b { z-index: 0; }
.v2-pw .rg-f { z-index: 2; clip-path: inset(50% 0 0 0); }
.v2-pl-giant { --c: #171229; }
.v2-pl-teal { --c: #1f4a5e; --st: #275b72; }
.v2-pl-dust { --c: #5e3726; --st: #6d412d; --ring: #9c7434; --rs: .2vw; }
.v2-pl-moon { --c: #3a3346; }
.v2-pl-moon .tx {
  background:
    radial-gradient(circle at 32% 40%, #2f2939 0 11%, transparent 11.5%),
    radial-gradient(circle at 62% 64%, #2f2939 0 14%, transparent 14.5%),
    radial-gradient(circle at 70% 28%, #2f2939 0 7%, transparent 7.5%);
}
.v2-pl-pink { --c: #a4527f; --ring: #cdb8ec; --rs: 1px; }
.v2-pl-gold { --c: #a57b2a; --st: #b68a33; }
.v2-pl-lav { --c: #6c56a0; --st: #7a64ae; --ring: #4f9cc0; --rs: .12vw; }
/* drifting tools */
.v2-tool { position: absolute; will-change: transform; opacity: .6; }
.v2-tool i { display: block; width: 100%; height: 100%; animation: v2-tool-float 10s ease-in-out infinite alternate; }
.v2-tool svg { display: block; width: 100%; height: 100%; }
@keyframes v2-tool-float { from { transform: translate(-6px, 5px) rotate(-9deg); } to { transform: translate(8px, -10px) rotate(11deg); } }
@media (max-width: 760px) { .v2-space .v2-tool:nth-of-type(n+5), .v2-pl-moon, .v2-pl-pink { display: none; } .v2-tool { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .v2-tool i { animation: none !important; } }

/* ==========================================================================
   22. v2.20 — logo: the mark only (no "SpaceTools" wordmark), 36 px;
       the star is its own layer and twinkles now and then (and on hover)
   ========================================================================== */
html.st-v2 body #st-navigation .brand::after { content: none !important; display: none !important; }
html.st-v2 body #st-navigation .brand .brand-logo-wrap {
  position: relative !important;
  width: 36px !important; min-width: 36px !important; max-width: 36px !important;
  height: 36px !important; min-height: 36px !important; max-height: 36px !important;
  background: url(/static/img/v2/logo-base.png?v=2) center / contain no-repeat !important;
}
html.st-v2 body #st-navigation .brand .brand-logo-wrap img.spacetools-icon-logo { opacity: 0 !important; }
/* the star is a small element of its own (added by spacetools-motion-v2.js): the old logo rules
   lock the wrap's ::before/::after with transform/animation !important, which no keyframe can beat */
html.st-v2 #st-navigation .brand-logo-wrap .v2-logo-star {
  position: absolute; inset: 0; z-index: 2; display: block; pointer-events: none;
  background: url(/static/img/v2/logo-star.png?v=2) center / contain no-repeat;
  transform-origin: 86.5% 24.8%;
}
@media (prefers-reduced-motion: no-preference) {
  html.st-v2 #st-navigation .brand-logo-wrap .v2-logo-star { animation: v2-star-twinkle 6s ease-in-out 1.2s infinite; }
  html.st-v2 #st-navigation .brand:hover .brand-logo-wrap .v2-logo-star { animation: v2-star-pop .8s cubic-bezier(.34,1.56,.64,1) 1; }
}
/* a quiet twinkle every 6 s: a quarter turn, a little bigger and brighter, back */
@keyframes v2-star-twinkle {
  0%, 84%, 100% { transform: rotate(0deg) scale(1); filter: brightness(1); }
  90% { transform: rotate(45deg) scale(1.35); filter: brightness(1.6) drop-shadow(0 0 3px rgba(226,209,250,.9)); }
  96% { transform: rotate(90deg) scale(.95); filter: brightness(1.1); }
}
@keyframes v2-star-pop {
  0% { transform: rotate(0deg) scale(1); }
  45% { transform: rotate(60deg) scale(1.5); filter: brightness(1.7) drop-shadow(0 0 4px rgba(226,209,250,.95)); }
  100% { transform: rotate(90deg) scale(1); filter: brightness(1); }
}

/* ==========================================================================
   23. v2.21 — phones: calm and simple. Same theme, far less on screen.
       Everything here is inside max-width: 760px; desktop is untouched.
   ========================================================================== */
@media (max-width: 760px) {
  /* backdrop: no drifting tools; inner pages no planets; home keeps two faint ones */
  html.st-v2 .v2-space:not(.is-home) { display: none !important; }
  html.st-v2 .v2-space .v2-tool { display: none !important; }
  html.st-v2 .v2-space.is-home { opacity: .45 !important; }
  html.st-v2 .v2-space.is-home .v2-pw:not(.v2-pl-teal):not(.v2-pl-dust) { display: none !important; }
  html.st-v2 :is(.v2-buddy, .v2-buddy-peek) { display: none !important; }

  /* page heads: only the title (no label line, icon tile or accent rule) */
  html.st-v2 :is(.v2-crumb, .st-maker-brand, .library-clean-eyebrow, .etsy-v2-kicker, .membership-kicker, .v2-head-tile, .v2-home .v2-eyebrow, .me-page-identity, .chat-brand, .chat-eyebrow) { display: none !important; }
  /* model library cards: one tag on the picture is enough */
  html.st-v2 .ml-card .ml-badge ~ .ml-badge { display: none !important; }
  html.st-v2 :is(.v2-head, .library-clean-head, .maker-header)::after { display: none !important; }
  html.st-v2 :is(.v2-head, .library-clean-head, .maker-header) { padding-bottom: 0 !important; margin-bottom: 16px !important; border: 0 !important; }
  html.st-v2 .v2-page h1.v2-title, html.st-v2 .v2-title, html.st-v2 .maker-header h1.maker-title, html.st-v2 .library-clean-head h1 { font-size: 24px !important; margin: 0 !important; }
  html.st-v2 #st-page-content { padding-top: 14px !important; }

  /* panels: one radius, one padding, lighter borders */
  html.st-v2 #st-page-content :is(.maker-card, .ss-pool, .ss-card, .ls-panel, .telegram-panel, .settings-grid > .card) {
    padding: 16px !important; border-radius: 16px !important; border-color: #1d1726 !important;
  }

  /* home: hero, one-line readout, tools as a simple list */
  html.st-v2 .v2-hero { gap: 12px !important; padding-top: 8px !important; }
  html.st-v2 .v2-hero-copy { gap: 22px !important; }
  html.st-v2 .v2-readout { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; row-gap: 0 !important; margin: 0 !important; }
  html.st-v2 .v2-readout div { padding: 0 10px !important; border-left: 1px solid rgba(255,255,255,.08) !important; }
  html.st-v2 .v2-readout div:first-child { padding-left: 0 !important; border-left: 0 !important; }
  html.st-v2 .v2-readout dt { font-size: 9px !important; letter-spacing: .14em !important; }
  html.st-v2 .v2-readout dd { font-size: 20px !important; margin-top: 6px !important; }
  html.st-v2 .v2-hero-visual { width: min(100%, 320px) !important; }
  html.st-v2 .v2-tiles { grid-template-columns: 1fr !important; gap: 8px !important; }
  html.st-v2 .v2-tile {
    height: auto !important; min-height: 0 !important; padding: 14px 16px !important; border-radius: 14px !important;
    display: grid !important; grid-template-columns: 26px minmax(0, 1fr) auto !important; grid-template-rows: auto !important;
    align-items: center !important; column-gap: 14px !important;
  }
  html.st-v2 .v2-tile-n { display: none !important; }
  html.st-v2 .v2-tile-ic { grid-column: 1 !important; grid-row: 1 !important; align-self: center !important; display: flex; }
  html.st-v2 .v2-tile-ic svg { width: 24px !important; height: 24px !important; }
  html.st-v2 .v2-tile-name { grid-column: 2 !important; grid-row: 1 !important; font-size: 15px !important; }
  html.st-v2 .v2-tile-arrow { grid-column: 3 !important; grid-row: 1 !important; align-self: center !important; opacity: .55 !important; transform: none !important; }

  /* library cards: picture, name, then one row of three equal icon buttons */
  html.st-v2 #libraryPageRoot .card { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-content: flex-start !important; align-items: stretch !important; gap: 6px !important; }
  html.st-v2 #libraryPageRoot .card > * { flex: 0 0 100%; min-width: 0; }
  html.st-v2 #libraryPageRoot .card > .listing-card-entry { flex: 1 1 0 !important; margin: 0 !important; padding: 0 !important; }
  html.st-v2 #libraryPageRoot .card > .library-clean-actions { flex: 2 1 0 !important; display: flex !important; gap: 6px !important; margin: 0 !important; padding: 0 !important; }
  html.st-v2 #libraryPageRoot .library-clean-actions > * { flex: 1 1 0 !important; min-width: 0 !important; }
  html.st-v2 #st-page-content #libraryPageRoot .card .listing-card-entry > button,
  html.st-v2 #st-page-content #libraryPageRoot .library-clean-actions .library-clean-download,
  html.st-v2 #st-page-content #libraryPageRoot .library-clean-actions .library-clean-more {
    width: 100% !important; min-width: 0 !important; height: 36px !important; min-height: 36px !important; padding: 0 !important;
    display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 10px !important;
  }
  html.st-v2 #st-page-content #libraryPageRoot .card [data-create-listing][data-create-listing]:not(:disabled),
  html.st-v2 #st-page-content #libraryPageRoot .library-clean-actions .library-clean-download { font-size: 0 !important; letter-spacing: 0 !important; }
  html.st-v2 #st-page-content #libraryPageRoot [data-create-listing]:not(:disabled)::before { display: inline !important; content: "\2197" !important; margin: 0 !important; font-size: 16px !important; }
  html.st-v2 #st-page-content #libraryPageRoot .library-clean-actions .library-clean-download::before { content: "\2193"; font: 500 16px/1 var(--v2-mono); color: #d8cfe4; }
  html.st-v2 #libraryPageRoot .library-clean-menu-wrap { display: flex !important; }

  /* telegram: small readouts instead of big tiles */
  html.st-v2 .telegram-page .tgcompact-summary { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; margin: 12px 0 16px !important; }
  html.st-v2 .telegram-page .tgcompact-summary > .tgcompact-metric:first-child { grid-column: 1 / -1 !important; }
  html.st-v2 #st-page-content .tgcompact-metric { padding: 12px 14px !important; border-radius: 14px !important; }
  html.st-v2 #st-page-content .tgcompact-metric strong { font-size: 20px !important; }

  /* sticker studio: the step chain on one scrolling line */
  html.st-v2 .ss-flow { flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none; white-space: nowrap; }
  html.st-v2 .ss-flow::-webkit-scrollbar { display: none; }
}

/* ==========================================================================
   24. v2.22 — overlays inside cards are solid again. The nested-panel rule
       (section 16) made them nearly transparent, so e.g. the 3D Maker
       "Advanced settings" sheet showed the card beneath it. Extra ids only to
       outrank that rule's :not(#…) chain.
   ========================================================================== */
html.st-v2 body #st-page-content #advancedPanel#advancedPanel#advancedPanel.advanced-panel {
  background: #120e18 !important; border-radius: inherit !important; box-shadow: inset 0 0 0 1px #2b2336 !important;
}
html.st-v2 #advancedPanel input[type="checkbox"], html.st-v2 #advancedPanel input[type="radio"] { accent-color: #c4a3f2; }

/* ==========================================================================
   25. v2.23 — 3D Maker: generate button you can see, a picture that does
       not stretch the page, and the neon-mesh making-of (JS 3f)
   ========================================================================== */
/* the main action: suit orange when ready, clearly muted (but readable) when not */
html.st-v2 body #st-page-content #generateBtn#generateBtn.generate-btn {
  opacity: 1 !important; min-height: 52px !important; border-radius: 14px !important;
  font-weight: 700 !important; transition: transform .35s var(--t-ease-x), box-shadow .35s var(--t-ease-x), filter .2s !important;
}
html.st-v2 body #st-page-content #generateBtn#generateBtn.generate-btn:not(:disabled) {
  background: linear-gradient(180deg, #fb9e46, #de712b) !important; border: 1px solid #de712b !important; color: #1a0d05 !important;
  box-shadow: 0 14px 30px -14px rgba(222,113,43,.75) !important; cursor: pointer;
}
html.st-v2 body #st-page-content #generateBtn#generateBtn.generate-btn:not(:disabled):hover {
  background: linear-gradient(180deg, #ffb066, #e97d33) !important; transform: translate(-3px, -3px) !important;
  box-shadow: 1px 1px 0 #b8581c, 2px 2px 0 #a24d18, 3px 3px 0 #8c4214, 0 18px 36px -16px rgba(222,113,43,.6) !important;
}
html.st-v2 body #st-page-content #generateBtn#generateBtn.generate-btn:not(:disabled) :is(.st-generate-label, .st-generate-cost) { color: #1a0d05 !important; }
html.st-v2 body #st-page-content #generateBtn#generateBtn.generate-btn:not(:disabled) .st-generate-cost {
  background: rgba(26,13,5,.14) !important; border-radius: 999px; padding: 3px 9px !important; opacity: .85;
}
html.st-v2 body #st-page-content #generateBtn#generateBtn.generate-btn:disabled {
  background: rgba(251,158,70,.06) !important; border: 1.5px dashed rgba(251,158,70,.45) !important; color: #e4dcef !important; cursor: not-allowed; box-shadow: none !important;
}
html.st-v2 body #st-page-content #generateBtn#generateBtn.generate-btn:disabled :is(.st-generate-label, .st-generate-cost) { color: #e4dcef !important; }
html.st-v2 body #st-page-content #generateBtn#generateBtn.generate-btn:disabled .st-generate-cost { color: #fbb877 !important; }
/* while a model is being made: an orange light runs through the (disabled) button */
html.st-v2 body #st-page-content #generateBtn#generateBtn.generate-btn.v2-busy {
  border: 1px solid rgba(255,122,46,.45) !important; color: #f3eff7 !important; position: relative; overflow: hidden;
}
html.st-v2 body #st-page-content #generateBtn#generateBtn.generate-btn.v2-busy .st-generate-label { color: #ffd2b0 !important; }
html.st-v2 body #st-page-content #generateBtn#generateBtn.generate-btn.v2-busy::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255,122,46,.22) 50%, transparent 70%) 0 0 / 220% 100% no-repeat;
  animation: v2-busy-run 1.8s linear infinite;
}
@keyframes v2-busy-run { from { background-position: 130% 0; } to { background-position: -130% 0; } }

/* the chosen picture: a fixed, calm height (no more page-long previews) */
html.st-v2 #st-page-content #dropzone.maker-has-preview { min-height: 0 !important; }
html.st-v2 #st-page-content #dropzone.maker-has-preview .maker-preview-stage { height: auto !important; min-height: 0 !important; flex: none !important; }
html.st-v2 #st-page-content #dropzone.maker-has-preview .maker-preview-image {
  flex: none !important; width: 100% !important; height: clamp(240px, 42vh, 420px) !important; max-height: none !important; object-fit: contain !important;
}
@media (max-width: 760px) {
  html.st-v2 #st-page-content #dropzone.maker-has-preview .maker-preview-image { height: clamp(190px, 32vh, 290px) !important; }
}

/* making-of: our neon mesh replaces the old particle orbits and rings */
html.st-v2 #stGenerationStage .v2-genmesh { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  html.st-v2 #stGenerationStage #stGenerationCanvas { opacity: 0 !important; }
  html.st-v2 #stGenerationStage #stGenerationMotion { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { html.st-v2 #stGenerationStage .v2-genmesh { display: none !important; } }

/* ==========================================================================
   26. v2.24 — the hero cat flies in on its rocket (JS: spacetools-hero-cat.js);
       card pictures load as holograms (JS 3f, the overlay .v2-holo)
   ========================================================================== */
/* landing pad and contact shadow only appear as the cat arrives */
.v2-hero-stage.is-flying::before, .v2-hero-stage.is-flying .v2-plate { opacity: var(--land, 0); }

/* hologram load: an overlay over the picture, never the picture itself.
   (:is(#v2-holo, …) only raises specificity: library rules paint every thumb child with !important) */
html.st-v2 .v2-holo:is(#v2-holo, .v2-holo) {
  position: absolute !important; z-index: 1; display: block !important; overflow: hidden !important; pointer-events: none !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important;
  transform: none !important; filter: none !important; opacity: 1 !important; min-width: 0 !important; min-height: 0 !important;
}
html.st-v2 .v2-holo:is(#v2-holo, .v2-holo) b {
  position: absolute; left: 4%; right: 4%; bottom: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(226,209,250,.8) 20%, #fff 50%, rgba(226,209,250,.8) 80%, transparent);
  box-shadow: 0 0 14px 3px rgba(196,163,242,.55); opacity: 0;
}
html.st-v2 .v2-holo:is(#v2-holo, .v2-holo) b::before {
  content: ""; position: absolute; left: 6%; right: 6%; bottom: 2px; height: 46px;
  background: radial-gradient(60% 100% at 50% 100%, rgba(196,163,242,.24), transparent 70%);
}
/* still loading: an empty hologram frame with drifting lines and a light passing through */
html.st-v2 .v2-holo:is(#v2-holo, .v2-holo).is-wait {
  background:
    repeating-linear-gradient(180deg, rgba(226,209,250,.09) 0 1px, transparent 1px 4px),
    radial-gradient(70% 60% at 50% 55%, rgba(196,163,242,.16), transparent 70%),
    #120e18 !important;
  box-shadow: inset 0 0 0 1px rgba(196,163,242,.16), inset 0 0 26px rgba(196,163,242,.12) !important;
  animation: v2-holo-drift .5s linear infinite;
}
html.st-v2 .v2-holo:is(#v2-holo, .v2-holo).is-wait b { opacity: .7; animation: v2-holo-sweep 1.7s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes v2-holo-drift { to { background-position: 0 4px, 0 0, 0 0; } }
@keyframes v2-holo-sweep { from { bottom: 0; opacity: 0; } 15% { opacity: .75; } 85% { opacity: .75; } to { bottom: 100%; opacity: 0; } }
/* arrived: the picture shows as a hologram, the scan line rises and leaves the real colours behind */
html.st-v2 .v2-holo:is(#v2-holo, .v2-holo) canvas { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; display: none !important; background: none !important; filter: drop-shadow(0 0 6px rgba(196,163,242,.45)); }
html.st-v2 .v2-holo:is(#v2-holo, .v2-holo).is-scan { animation: v2-holo-reveal 1s cubic-bezier(.45,0,.25,1) both; }
html.st-v2 .v2-holo:is(#v2-holo, .v2-holo).is-scan canvas { display: block !important; }
html.st-v2 .v2-holo:is(#v2-holo, .v2-holo).is-scan b { opacity: 1; animation: v2-holo-line 1s cubic-bezier(.45,0,.25,1) both; }
@keyframes v2-holo-reveal { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } }
@keyframes v2-holo-line { from { bottom: 0; } 92% { opacity: 1; } to { bottom: 100%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { html.st-v2 .v2-holo:is(#v2-holo, .v2-holo) { display: none !important; } }

/* ==========================================================================
   27. v2.25 — floating navbar: the top bar is a glass pill centred at the top,
       a menu opens as a second floating strip of compact tool cards under it,
       with a one-line description of the tool you point at (JS 3a: desc).
       Desktop only (≥1101px with hover); phones keep their own menu.
   ========================================================================== */
@media (min-width: 1101px) and (hover: hover) {
  html.st-v2 body #st-navigation.site-header { background: transparent !important; border-bottom: 0 !important; padding-top: 14px !important; pointer-events: none; }
  html.st-v2 body #st-navigation.site-header::before,
  html.st-v2 body #st-navigation .st-v2-spectrum { display: none !important; }
  html.st-v2 body #st-navigation.site-header > .topbar {
    pointer-events: auto; position: relative !important;
    width: max-content !important; max-width: calc(100vw - 32px) !important;
    height: 60px !important; min-height: 60px !important;
    margin: 0 auto !important; padding: 0 8px 0 18px !important; gap: 14px !important;
    border-radius: 999px !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 24px 60px -24px rgba(0,0,0,.85) !important;
  }
  html.st-v2 body #st-navigation.site-header > .topbar::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
    background: rgba(16,12,22,.78);
    -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
  }
  html.st-v2 body #st-navigation .brand { height: 60px !important; }
  html.st-v2 #st-navigation .tabs-island,
  html.st-v2 #st-navigation .tabs,
  html.st-v2 #st-navigation .tabs > .st-native-nav-group { height: 60px !important; }
  html.st-v2 #st-navigation .tabs > .tab,
  html.st-v2 #st-navigation .tabs > .st-native-nav-group > .st-native-nav-trigger {
    height: 44px !important; min-height: 44px !important; margin-top: 8px !important; border-radius: 999px !important; padding: 0 16px !important;
  }
  html.st-v2 #st-navigation .tabs > .st-native-nav-group > .st-native-nav-trigger { margin-top: 0 !important; }
  html.st-v2 #st-navigation .tabs > .st-native-nav-group { display: flex !important; align-items: center !important; }
  html.st-v2 .st-v2-ind {
    top: 12px !important; bottom: auto !important; height: 36px !important; border-radius: 999px !important;
    background: color-mix(in srgb, var(--c, #c4a3f2) 14%, rgba(255,255,255,.04)) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, #c4a3f2) 34%, transparent) !important;
  }
  html.st-v2 .st-v2-ind::after { display: none !important; }
  html.st-v2 #st-navigation .topbar-actions { margin-left: 18px !important; gap: 12px !important; }

  /* the menu: a second floating strip, centred under the pill */
  html.st-v2 body #st-navigation .st-native-nav-dropdown {
    position: fixed !important; top: 86px !important; left: 50% !important; right: auto !important;
    width: max-content !important; min-width: 0 !important; max-width: calc(100vw - 48px) !important;
    transform: translateX(-50%) !important;
    display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: center !important; align-items: stretch !important;
    grid-template-columns: none !important; gap: 6px !important; padding: 8px 8px 38px !important;
    border-radius: 22px !important;
    background: rgba(18,14,24,.97) !important;
    border: 1px solid #2b2336 !important;
    box-shadow: 0 30px 70px -24px rgba(0,0,0,.9) !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    pointer-events: auto;
  }
  /* an invisible bridge so the pointer can travel from the pill down to the strip */
  html.st-v2 body #st-navigation .st-native-nav-dropdown::before {
    content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 20px; background: transparent;
  }
  html.st-v2 #st-navigation .st-native-nav-dropdown .st-v2-menu-label,
  html.st-v2 #st-navigation .st-native-nav-dropdown .st-v2-menu-num,
  html.st-v2 #st-navigation .st-native-nav-dropdown .st-v2-menu-arrow { display: none !important; }
  html.st-v2 body #st-navigation .st-native-nav-dropdown > .tab {
    position: relative !important; width: 200px !important; min-height: 0 !important; height: auto !important;
    display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important;
    gap: 12px !important; padding: 14px !important; border-radius: 16px !important;
    background: transparent !important; border: 0 !important; box-shadow: none !important; transform: none !important;
    color: #f3eff7 !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.2 !important;
    transition: background .2s ease, box-shadow .2s ease !important;
  }
  html.st-v2 body #st-navigation .st-native-nav-dropdown > .tab:hover,
  html.st-v2 body #st-navigation .st-native-nav-dropdown > .tab:focus-visible {
    background: #1c1526 !important; box-shadow: inset 0 -2px 0 var(--c) !important; transform: none !important;
  }
  html.st-v2 body #st-navigation .st-native-nav-dropdown > .tab.active { background: #17111f !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent) !important; }
  html.st-v2 body #st-navigation .st-native-nav-dropdown .st-native-nav-icon,
  html.st-v2 body #st-navigation .st-native-nav-dropdown .st-native-nav-icon.st-mi-holder {
    width: 38px !important; height: 38px !important; flex: 0 0 38px !important; margin: 0 !important; border-radius: 11px !important;
    transform: none !important; box-shadow: none !important;
    color: var(--c) !important; background: color-mix(in srgb, var(--c) 14%, transparent) !important;
  }
  html.st-v2 body #st-navigation .st-native-nav-dropdown > .tab:hover .st-native-nav-icon { background: color-mix(in srgb, var(--c) 22%, transparent) !important; color: var(--c) !important; transform: none !important; box-shadow: none !important; }
  html.st-v2 body #st-navigation .st-native-nav-dropdown > .tab:hover svg.st-mi .st-mi-acc { stroke: #fff !important; }
  html.st-v2 body #st-navigation .st-native-nav-dropdown .st-native-nav-icon svg.st-mi { width: 24px !important; height: 24px !important; }
  html.st-v2 body #st-navigation .st-native-nav-dropdown .st-v2-menu-tag {
    position: absolute !important; top: 18px; right: 14px; margin: 0 !important; padding: 0 !important;
    background: none !important; box-shadow: none !important;
    font: 700 10px/1 var(--v2-mono, monospace) !important; letter-spacing: .14em !important; color: #6f6780 !important;
    transition: color .2s ease;
  }
  html.st-v2 body #st-navigation .st-native-nav-dropdown > .tab:hover .st-v2-menu-tag { color: var(--c) !important; }
  html.st-v2 body #st-navigation .st-native-nav-dropdown .st-v2-menu-desc {
    position: absolute; left: 12px; right: 12px; bottom: 10px; text-align: center; overflow: hidden; text-overflow: ellipsis;
    font: 500 13px/1.3 "Plus Jakarta Sans", system-ui, sans-serif; color: #8a8198; white-space: nowrap;
  }
}

/* ==========================================================================
   28. v2.26 — search as a magnifier: the "Find a tool" pill is replaced by a
       round magnifier; pointing at it (or clicking, or Ctrl/⌘ K) slides a
       search bar open to the left, over the menu, and typing lists matching
       tools under it (JS: setupSearchIcon). Desktop only (≥1101px), where the
       old trigger is hidden; narrower screens keep what they had.
   ========================================================================== */
.st-v2-srch { display: none; }
@media (min-width: 1101px) {
  html #st-navigation .topbar-actions > .st-quick-trigger,
  html #st-navigation .topbar-actions > .st-v2-find { display: none !important; }
  html #st-navigation .topbar-actions > .st-v2-srch {
    display: block; position: relative; z-index: 40; flex: 0 0 40px; width: 40px; height: 40px;
  }
  .st-v2-srch .st-v2-srch-bar {
    position: absolute; top: 0; right: 0; height: 40px; width: 40px; box-sizing: border-box;
    border-radius: 999px; overflow: hidden;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
    transition: width .38s cubic-bezier(.2,.8,.2,1), background .25s ease, border-color .25s ease, box-shadow .25s ease;
  }
  .st-v2-srch:hover .st-v2-srch-bar { background: rgba(255,255,255,.08); border-color: rgba(196,163,242,.35); }
  .st-v2-srch.is-open .st-v2-srch-bar {
    width: 320px; background: #16101e; border-color: rgba(196,163,242,.45);
    box-shadow: 0 0 0 4px rgba(196,163,242,.08), 0 14px 34px -14px rgba(0,0,0,.9);
  }
  html .st-v2-srch .st-v2-srch-btn {
    position: absolute; top: 0; right: 0; width: 38px; height: 38px; padding: 0; margin: 0;
    display: flex; align-items: center; justify-content: center;
    border: 0 !important; border-radius: 999px; background: transparent !important; box-shadow: none !important;
    color: #c4a3f2; cursor: pointer;
  }
  .st-v2-srch .st-v2-srch-btn svg { width: 18px; height: 18px; transition: transform .3s ease; }
  .st-v2-srch:hover .st-v2-srch-btn svg { transform: scale(1.08); }
  html .st-v2-srch .st-v2-srch-bar input,
  html .st-v2-srch .st-v2-srch-bar input:focus {
    position: absolute; top: 0; left: 0; right: 38px; width: auto; height: 38px; box-sizing: border-box;
    margin: 0; padding: 0 64px 0 18px !important;
    border: 0 !important; outline: none !important; box-shadow: none !important; background: transparent !important; border-radius: 0 !important;
    color: #f3eff7; font: 500 14px/38px "Plus Jakarta Sans", system-ui, sans-serif;
    opacity: 0; pointer-events: none; transition: opacity .2s ease !important;
  }
  .st-v2-srch .st-v2-srch-bar input::placeholder { color: #7d748b; }
  html .st-v2-srch.is-open .st-v2-srch-bar input { opacity: 1; pointer-events: auto; transition: opacity .25s ease .12s !important; }
  .st-v2-srch .st-v2-srch-bar kbd {
    position: absolute; top: 50%; right: 42px; transform: translateY(-50%);
    padding: 3px 6px; border-radius: 6px; border: 1px solid #2b2336; background: transparent;
    font: 400 11px/1 var(--v2-mono, monospace); color: #6f6780; white-space: nowrap;
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  .st-v2-srch.is-open .st-v2-srch-bar input:placeholder-shown ~ kbd { opacity: 1; transition-delay: .18s; }

  /* matching tools, as a floating card under the pill */
  .st-v2-srch .st-v2-srch-list {
    position: absolute; top: 62px; right: -8px; width: 360px; max-height: min(62vh, 520px); overflow: auto;
    list-style: none; margin: 0; padding: 6px; box-sizing: border-box;
    border-radius: 20px; background: rgba(18,14,24,.97); border: 1px solid #2b2336;
    box-shadow: 0 30px 70px -24px rgba(0,0,0,.9);
    animation: v2-srch-in .28s cubic-bezier(.2,.8,.2,1) both;
  }
  .st-v2-srch .st-v2-srch-list[hidden] { display: none; }
  .st-v2-srch .st-v2-srch-list li { margin: 0; padding: 0; }
  .st-v2-srch .st-v2-srch-list a {
    display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 14px;
    color: #f3eff7; text-decoration: none;
  }
  /* some pages style every a[href="/…"] link with !important; keep the list neutral */
  html body .st-v2-srch .st-v2-srch-list a[href] { background: transparent !important; box-shadow: none !important; border-color: transparent !important; color: #f3eff7 !important; }
  html body .st-v2-srch .st-v2-srch-list a[href].is-on { background: #1c1526 !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, #c4a3f2) 30%, transparent) !important; }
  .st-v2-srch .st-v2-srch-ic {
    width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: var(--c, #c4a3f2); background: color-mix(in srgb, var(--c, #c4a3f2) 14%, transparent);
  }
  html .st-v2-srch .st-v2-srch-ic svg { width: 24px !important; height: 24px !important; color: inherit; overflow: visible;
    fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
  html .st-v2-srch .st-v2-srch-ic svg .st-mi-acc { stroke: #f3eff7 !important; }
  html .st-v2-srch .st-v2-srch-list a.is-on svg.st-mi [class*="mi-"] { animation-play-state: running; }
  .st-v2-srch .st-v2-srch-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .st-v2-srch .st-v2-srch-tx b { font: 700 14px/1.25 "Plus Jakarta Sans", system-ui, sans-serif; }
  .st-v2-srch .st-v2-srch-tx small { font: 500 12px/1.3 "Plus Jakarta Sans", system-ui, sans-serif; color: #8a8198; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .st-v2-srch .st-v2-srch-list em {
    margin-left: auto; flex: none; font: 700 10px/1 var(--v2-mono, monospace); font-style: normal;
    letter-spacing: .12em; text-transform: uppercase; color: #6f6780;
  }
  .st-v2-srch .st-v2-srch-list a.is-on em { color: var(--c, #c4a3f2); }
  .st-v2-srch .st-v2-srch-none { padding: 14px 12px; font: 500 13px "Plus Jakarta Sans", system-ui, sans-serif; color: #8a8198; }
}
@keyframes v2-srch-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .st-v2-srch .st-v2-srch-bar, .st-v2-srch .st-v2-srch-bar input { transition: none !important; }
  .st-v2-srch .st-v2-srch-list { animation: none !important; }
}

/* ==========================================================================
   29. v2.27 — printer guides in the interface: a "Rehberler / Guides" top tab
       (added by JS: setupGuidesTab), a "03 Guides" strip on the home page with
       the newest published guides, and a "Guides" group in the nav search.
   ========================================================================== */
html.st-v2 .v2-guides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
html.st-v2 a.v2-guide {
  position: relative; min-width: 0; display: flex; flex-direction: column; gap: 10px;
  padding: 20px; border-radius: 18px; text-decoration: none; color: #f3eff7;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .2s;
}
html.st-v2 a.v2-guide::before { content: ""; position: absolute; left: 20px; right: 20px; top: -1px; height: 2px; border-radius: 2px; background: var(--c, #5bd18b); opacity: .6; }
html.st-v2 a.v2-guide:hover { transform: translateY(-2px); }
.v2-guide-top { display: flex; justify-content: space-between; gap: 10px; font: 700 10px/1 var(--v2-mono, monospace); letter-spacing: .14em; text-transform: uppercase; color: #6f6780; }
.v2-guide-top span:first-child { color: var(--c, #5bd18b); }
html.st-v2 a.v2-guide b { font: 700 18px/1.25 "Tomorrow", "Plus Jakarta Sans", system-ui, sans-serif; text-wrap: balance; }
.v2-guide-sum { font-size: 14px; line-height: 1.55; color: #8a8198; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 900px) { html.st-v2 .v2-guides { grid-template-columns: minmax(0, 1fr); } }
.st-v2-srch .st-v2-srch-list .st-v2-srch-sec {
  margin: 6px 4px 2px; padding: 12px 8px 6px; border-top: 1px solid #231c2d;
  font: 700 10px/1 var(--v2-mono, monospace); letter-spacing: .16em; text-transform: uppercase; color: #6f6780;
}

/* ==========================================================================
   30. v2.28 — tips from the mascots (JS: setupTips). Home: a speech bubble by
       the hero cat's helmet. Other pages: a pixel bubble over the Space Cat.
   ========================================================================== */
.v2-tip { pointer-events: auto; opacity: 0; visibility: hidden; transition: opacity .3s ease, transform .35s cubic-bezier(.2,.8,.2,1), visibility 0s linear .35s; }
.v2-tip.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .3s ease, transform .35s cubic-bezier(.2,.8,.2,1), visibility 0s; }
.v2-tip-k { display: block; margin-bottom: 6px; font: 700 10px/1 var(--v2-mono, monospace); letter-spacing: .16em; text-transform: uppercase; }
.v2-tip-t { margin: 0; }
html .v2-tip a.v2-tip-a { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 700; text-decoration: none; }
html .v2-tip a.v2-tip-a:hover { text-decoration: underline; }
html .v2-tip button.v2-tip-x { all: unset; position: absolute; top: 6px; right: 8px; width: 20px; height: 20px; border-radius: 6px;
  text-align: center; font: 700 14px/20px var(--v2-mono, monospace); cursor: pointer; opacity: .55; }
html .v2-tip button.v2-tip-x:hover, html .v2-tip button.v2-tip-x:focus-visible { opacity: 1; }

/* home: a clean speech bubble, top-left of the cat, tail pointing at the helmet */
.v2-hero-visual > .v2-tip-hero {
  position: absolute; z-index: 5; left: 2%; top: 9%; width: min(270px, 80vw); box-sizing: border-box;
  padding: 14px 34px 14px 16px; border-radius: 18px;
  background: #f3eff7; color: #1a1422; box-shadow: 0 18px 40px -16px rgba(0,0,0,.7);
  font: 600 14px/1.45 "Plus Jakarta Sans", system-ui, sans-serif;
  transform: translateY(8px) scale(.94); transform-origin: 85% 100%;
}
.v2-hero-visual > .v2-tip-hero::after {
  content: ""; position: absolute; right: 26px; bottom: -12px; width: 22px; height: 16px; background: inherit;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.v2-tip-hero .v2-tip-k { color: #8a5fd1; }
html .v2-tip-hero a.v2-tip-a { color: #de712b; }
html .v2-tip-hero button.v2-tip-x { color: #1a1422; }
.v2-hero-visual > .v2-tip-hero.is-above { transform-origin: 50% 100%; }
.v2-hero-visual > .v2-tip-hero.is-above::after { right: auto; left: calc(50% - 8px); width: 16px; clip-path: polygon(0 0, 100% 0, 50% 100%); }

/* other pages: a pixel bubble over the Space Cat (moves with it) */
.v2-buddy > .v2-tip-buddy {
  position: absolute; left: 6px; bottom: 76px; width: 230px; box-sizing: border-box;
  padding: 10px 28px 10px 12px; border-radius: 3px;
  background: #f3eff7; color: #0c0911;
  box-shadow: 0 0 0 2px #26203a, 4px 4px 0 0 rgba(0,0,0,.35);
  font: 600 13px/1.4 "Plus Jakarta Sans", system-ui, sans-serif;
  transform: translateY(6px); transform-origin: 10% 100%;
}
.v2-buddy > .v2-tip-buddy.is-left { left: auto; right: 6px; transform-origin: 90% 100%; }
.v2-buddy > .v2-tip-buddy::after {
  content: ""; position: absolute; left: 18px; bottom: -8px; width: 8px; height: 8px; background: #f3eff7;
  box-shadow: 2px 2px 0 0 #26203a;
}
.v2-buddy > .v2-tip-buddy.is-left::after { left: auto; right: 18px; }
.v2-tip-buddy .v2-tip-k { color: #6b4fa0; }
html .v2-tip-buddy a.v2-tip-a { color: #c2571c; }
html .v2-tip-buddy button.v2-tip-x { color: #0c0911; top: 4px; right: 4px; }
@media (prefers-reduced-motion: reduce) { .v2-tip, .v2-tip.is-on { transition: none; transform: none; } }

/* v2.32 — the hover description line of the menu is a desktop-only element; on the
   phone menu it showed as a stray line ("Create visual assets") under Studio */
@media (max-width: 1100px) {
  html.st-v2 #st-navigation .st-native-nav-dropdown .st-v2-menu-desc { display: none !important; }
}