/* Qwix product-completion layer — 2026-07-14. Loaded after all legacy styles. */
:root {
  --qx-ease: cubic-bezier(.2,.82,.2,1);
  --qx-danger: #ff7c88;
}

.qx-hidden { display:none !important; }

/* Shared popup menu. Graph uses the exact same visual language and motion as Colors. */
.qx-context-menu{
  position:fixed!important;z-index:999999!important;width:max-content!important;min-width:104px!important;max-width:min(220px,calc(100vw - 16px))!important;max-height:220px!important;
  padding:6px!important;display:grid!important;gap:2px!important;overflow:auto!important;
  border:1px solid var(--qwix-border,rgba(255,255,255,.10))!important;border-radius:9px!important;
  background:var(--aptk-block,#202124)!important;background-image:none!important;color:var(--qwix-ink,#f4f4f5)!important;
  box-shadow:0 20px 40px -16px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05)!important;backdrop-filter:none!important;
  opacity:1;transform:translateY(0) scale(1);transform-origin:top center;
  transition:opacity 180ms var(--qwix-motion-ease,ease),transform 220ms var(--qwix-motion-bounce,cubic-bezier(.2,.9,.2,1)),border-radius 220ms var(--qwix-motion-out,ease)!important;
}
.qx-context-menu.qwix-dropdown-motion-enter{opacity:0!important;transform:translateY(-3px) scaleX(.975) scaleY(.92)!important;border-radius:13px!important}
.qx-context-menu.qwix-dropdown-motion-leave{opacity:0!important;transform:translateY(-2px) scaleX(.985) scaleY(.95)!important;pointer-events:none!important}
.qx-context-menu .saved-asset-menu-btn{
  display:block!important;width:100%!important;height:auto!important;min-height:29px!important;margin:0!important;padding:8px 10px!important;
  border:0!important;border-radius:7px!important;background:transparent!important;background-image:none!important;
  color:var(--qwix-ink-tertiary,rgba(244,244,245,.55))!important;box-shadow:none!important;
  font:700 11px/1 Inter,Arial,sans-serif!important;text-align:left!important;cursor:pointer!important;outline:none!important;transform:none!important;
  transition:transform 130ms var(--qwix-motion-out,ease),background-color 120ms ease,color 120ms ease!important;
}
.qx-context-menu .saved-asset-menu-btn:hover,.qx-context-menu .saved-asset-menu-btn:focus-visible{transform:translateX(3px)!important;background:var(--qwix-surface-hover,#34302A)!important;color:var(--qwix-ink,#f4f4f5)!important;outline:0!important}
.qx-context-menu .saved-asset-menu-btn-danger:hover{background:rgba(255,76,76,.14)!important;color:#ffb0b0!important}
.qx-context-menu .qx-menu-note{float:right;font:600 9px/1 Inter,sans-serif;color:var(--aptk-muted,#8b8d97)}

/* Favorites are always visually obvious and remain first. */
.preset-card.qx-favorite,.graph-card.qx-favorite,.saved-color-btn.qx-favorite,.saved-gradient-btn.qx-favorite{
  outline:1px solid color-mix(in srgb,var(--aptk-accent,#c288ff) 70%,transparent);
  outline-offset:2px;
}
.preset-card.qx-favorite::after,.graph-card.qx-favorite::after{
  content:'★';position:absolute;right:5px;top:4px;z-index:3;color:var(--aptk-accent,#c288ff);font-size:9px;text-shadow:0 1px 8px rgba(0,0,0,.7);pointer-events:none;
}
.preset-card,.graph-card{position:relative}
.preset-card.qx-bounce,.graph-card.qx-bounce,.saved-color-btn.qx-bounce,.saved-gradient-btn.qx-bounce{animation:qx-recent-bounce 520ms var(--qx-ease)}
@keyframes qx-recent-bounce{0%{transform:scale(.94)}45%{transform:scale(1.055)}72%{transform:scale(.985)}100%{transform:scale(1)}}
@keyframes qx-cursor-blink{0%,48%{opacity:1}49%,100%{opacity:0}}
.smart-typewriter-preview{white-space:pre-wrap!important}
.smart-typewriter-content,.smart-typewriter-cursor{display:inline-block;white-space:pre-wrap}
.smart-typewriter-cursor{animation-name:qx-cursor-blink;animation-timing-function:steps(1,end);animation-iteration-count:infinite}
.smart-typewriter-preview .smart-typewriter-cursor:first-child{margin-right:2px}
.smart-typewriter-preview .smart-typewriter-cursor:last-child{margin-left:2px}

/* Graph mode becomes a compact hover-reveal menu labelled Value / Speed. */
#page-graph-editor #graphModeToggle{
  width:28px!important;min-width:28px!important;height:28px!important;padding:3px!important;
  display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:3px!important;
  overflow:hidden!important;border-radius:14px!important;transition:width 260ms var(--qx-ease),height 260ms var(--qx-ease),border-radius 260ms var(--qx-ease)!important;
  z-index:20!important;
}
#page-graph-editor #graphModeToggle:hover,#page-graph-editor #graphModeToggle:focus-within{
  width:78px!important;height:61px!important;border-radius:14px!important;
}
#page-graph-editor #graphModeToggle .graph-mode-btn{
  flex:0 0 24px!important;width:70px!important;min-width:70px!important;height:24px!important;min-height:24px!important;
  padding:0 8px!important;border-radius:10px!important;justify-content:flex-start!important;text-align:left!important;
  font-size:9px!important;letter-spacing:.01em!important;white-space:nowrap!important;
}
#page-graph-editor #graphModeToggle:not(:hover):not(:focus-within) .graph-mode-btn:not(.is-active){opacity:0;pointer-events:none}
#page-graph-editor #graphModeToggle:not(:hover):not(:focus-within) .graph-mode-btn.is-active{width:22px!important;min-width:22px!important;padding:0!important;justify-content:center!important;font-size:0!important}
#page-graph-editor #graphModeToggle:not(:hover):not(:focus-within) .graph-mode-btn.is-active::first-letter{font-size:9px}

.qx-graph-toolbar{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:7px 8px 5px}
.qx-segmented{display:flex;align-items:center;gap:3px;padding:3px;border:1px solid var(--aptk-edge,rgba(255,255,255,.08));border-radius:12px;background:var(--aptk-surface,rgba(255,255,255,.035))}
.qx-segmented button,.qx-mini-btn{min-height:26px;padding:0 9px;border:0;border-radius:9px;background:transparent;color:var(--aptk-muted,#8b8d97);font:750 9px/1 Inter,sans-serif;cursor:pointer}
.qx-segmented button.is-active,.qx-mini-btn:hover{background:var(--aptk-accent,#c288ff);color:var(--aptk-accent-ink,#17131c)}
.qx-graph-actions{display:flex;gap:4px}
.qx-graph-motion{min-height:180px;display:grid;align-content:center;gap:16px;padding:14px}
.qx-motion-track{position:relative;height:4px;border-radius:999px;background:color-mix(in srgb,var(--aptk-text,#fff) 13%,transparent);box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
.qx-motion-ball{position:absolute;left:0;top:50%;width:16px;height:16px;border-radius:50%;background:var(--aptk-accent,#c288ff);box-shadow:0 0 24px color-mix(in srgb,var(--aptk-accent,#c288ff) 70%,transparent);transform:translate(-50%,-50%);will-change:left}
.qx-motion-caption{text-align:center;color:var(--aptk-muted,#8b8d97);font:650 9px/1.35 Inter,sans-serif}

/* Advanced smart-text controls injected only for their corresponding preset. */
.qx-smart-advanced{display:none;margin-top:8px;padding-top:8px;border-top:1px solid var(--aptk-edge,rgba(255,255,255,.08));gap:7px}
.qx-smart-advanced.is-visible{display:grid}
.qx-smart-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.qx-smart-field{display:grid;gap:4px;min-width:0;color:var(--aptk-muted,#8b8d97);font:700 9px/1 Inter,sans-serif}
.qx-smart-field input,.qx-smart-field select{width:100%;min-width:0;height:30px;padding:0 8px;border:1px solid var(--aptk-edge,rgba(255,255,255,.08));border-radius:10px;background:var(--aptk-input,#101117);color:var(--aptk-text,#fff);font:650 10px/1 Inter,sans-serif;outline:0}
.qx-smart-field input:focus,.qx-smart-field select:focus{border-color:var(--aptk-accent,#c288ff)}
.qx-check{min-height:30px;display:flex;align-items:center;gap:7px;padding:0 9px;border:1px solid var(--aptk-edge,rgba(255,255,255,.08));border-radius:10px;color:var(--aptk-text,#fff);font:650 10px/1 Inter,sans-serif}
.qx-check input{accent-color:var(--aptk-accent,#c288ff)}

/* Expression additions. */

/* Settings dashboard keeps daily controls visible and Style Lab collapsible. */
#page-settings.qx-settings-ready .v139-settings-wrap{display:block!important;max-width:560px!important;margin:0 auto!important;padding:8px!important}
#page-settings .qx-settings-dashboard{display:grid;gap:10px;margin-bottom:10px}
.qx-settings-card{padding:12px;border:1px solid var(--aptk-edge,rgba(255,255,255,.08));border-radius:18px;background:var(--aptk-surface,rgba(255,255,255,.035));box-shadow:var(--aptk-hard-shadow-soft,0 8px 26px rgba(0,0,0,.18))}
.qx-settings-card h3{margin:0 0 9px;color:var(--aptk-text,#fff);font:820 12px/1 Inter,sans-serif}
.qx-settings-card p{margin:0;color:var(--aptk-muted,#8b8d97);font:600 9px/1.4 Inter,sans-serif}
.qx-settings-row{min-height:35px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--aptk-edge,rgba(255,255,255,.07));font:700 10px/1 Inter,sans-serif;color:var(--aptk-text,#fff)}
.qx-settings-row:first-of-type{border-top:0}
.qx-settings-row select,.qx-settings-row input[type=text]{height:28px;max-width:190px;padding:0 8px;border:1px solid var(--aptk-edge,rgba(255,255,255,.09));border-radius:9px;background:var(--aptk-input,#101117);color:var(--aptk-text,#fff);font:650 9px/1 Inter,sans-serif}
.qx-settings-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.qx-settings-actions button{min-height:30px;padding:0 10px;border:0;border-radius:10px;background:var(--aptk-accent,#c288ff);color:var(--aptk-accent-ink,#17131c);font:780 9px/1 Inter,sans-serif;cursor:pointer}
.qx-settings-actions button.secondary{background:var(--aptk-hover,rgba(255,255,255,.075));color:var(--aptk-text,#fff)}
.qx-settings-actions button.danger{background:rgba(255,86,104,.13);color:#ff8792}
.qx-profile-code{font-family:'IBM Plex Mono',monospace;letter-spacing:.12em;color:var(--aptk-muted,#8b8d97)}
.qx-style-details{border-radius:18px;overflow:hidden}
.qx-style-details>summary{list-style:none;min-height:42px;padding:0 13px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;border:1px solid var(--aptk-edge,rgba(255,255,255,.08));border-radius:18px;background:var(--aptk-surface,rgba(255,255,255,.035));color:var(--aptk-text,#fff);font:800 11px/1 Inter,sans-serif}
.qx-style-details>summary::-webkit-details-marker{display:none}.qx-style-details>summary::after{content:'›';font-size:18px;transform:rotate(90deg);transition:transform 220ms var(--qx-ease)}.qx-style-details[open]>summary::after{transform:rotate(-90deg)}
.qx-style-details .v139-settings-card{margin-top:8px!important}

/* Fonts library / project browser and groups. */
.qx-font-toolbar{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:8px 0}
.qx-font-folders{display:flex;gap:5px;overflow:auto;scrollbar-width:none}.qx-font-folders::-webkit-scrollbar{display:none}
.qx-font-folder{flex:0 0 auto;min-height:27px;padding:0 9px;border:1px solid var(--aptk-edge,rgba(255,255,255,.08));border-radius:10px;background:transparent;color:var(--aptk-muted,#8b8d97);font:700 9px/1 Inter,sans-serif}.qx-font-folder.is-active{background:var(--aptk-accent,#c288ff);color:var(--aptk-accent-ink,#17131c)}
.qx-font-group-card,.qx-project-font-card{padding:9px;border:1px solid var(--aptk-edge,rgba(255,255,255,.08));border-radius:13px;background:var(--aptk-surface,rgba(255,255,255,.035));display:grid;gap:6px}
.qx-font-group-card strong,.qx-project-font-card strong{font:800 11px/1 Inter,sans-serif;color:var(--aptk-text,#fff)}
.qx-font-group-card small,.qx-project-font-card small{font:600 8px/1.3 Inter,sans-serif;color:var(--aptk-muted,#8b8d97)}
.qx-font-card-select{position:absolute;right:5px;top:5px;z-index:4;accent-color:var(--aptk-accent,#c288ff)}
.saved-font-card{position:relative}
.qx-project-fonts{display:none;gap:7px}.qx-project-fonts.is-active{display:grid}.qx-font-library.is-hidden{display:none!important}

/* Plugin-native confirmation dialog. */
.qx-dialog-backdrop{position:fixed;inset:0;z-index:2147483200;display:none;place-items:center;padding:18px;background:rgba(0,0,0,.58);backdrop-filter:blur(8px)}
.qx-dialog-backdrop.is-open{display:grid}
.qx-dialog{width:min(360px,100%);padding:16px;border:1px solid var(--aptk-edge,rgba(255,255,255,.10));border-radius:20px;background:var(--qwix-bg,#171820);box-shadow:0 24px 70px rgba(0,0,0,.55);animation:qx-dialog-in 260ms var(--qx-ease) both}
.qx-dialog h3{margin:0 0 7px;color:var(--aptk-text,#fff);font:850 16px/1.15 Inter,sans-serif}.qx-dialog p{margin:0;color:var(--aptk-muted,#8b8d97);font:600 10px/1.5 Inter,sans-serif;white-space:pre-line}.qx-dialog-actions{display:flex;justify-content:flex-end;gap:7px;margin-top:16px}.qx-dialog-actions button{min-height:32px;padding:0 13px;border:0;border-radius:11px;background:var(--aptk-hover,rgba(255,255,255,.075));color:var(--aptk-text,#fff);font:780 10px/1 Inter,sans-serif}.qx-dialog-actions .primary{background:var(--aptk-accent,#c288ff);color:var(--aptk-accent-ink,#17131c)}.qx-dialog-actions .danger{background:#d74d5c;color:white}
@keyframes qx-dialog-in{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}

/* Reduced UI motion intentionally does not cross into Refs/Comps iframes. */
body.qwix-reduced-motion *:not(.expression-ball):not(.qx-motion-ball){animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}

@media(max-width:360px){.qx-smart-grid{grid-template-columns:1fr}.qx-settings-row{align-items:flex-start;flex-direction:column;padding:8px 0}.qx-settings-row select,.qx-settings-row input[type=text]{max-width:none;width:100%}}

/* After Effects 2023 CEP stability mode.
   Large/maximized panels can silently drop GPU-composited descendants while the
   DOM remains alive. Flatten those descendants only in the large-surface mode
   toggled by qwix-enhancements.js; normal docked panels retain their motion. */
body.qwix-cep-flat-surface *,
body.qwix-cep-flat-surface *::before,
body.qwix-cep-flat-surface *::after{
  animation:none !important;
  transition:none !important;
  filter:none !important;
  -webkit-filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  will-change:auto !important;
  transform:none !important;
  transform-style:flat !important;
  perspective:none !important;
  backface-visibility:visible !important;
  contain:none !important;
  isolation:auto !important;
  mix-blend-mode:normal !important;
}


/* Text > N: Start/End and Prefix/Suffix live in the main settings card.
   Every visible color comes from the current Style Lab theme. */
html body #page-text-presets .v124-slider-card .number-grid-row:not([style*="display: none"]):not([style*="display:none"]){
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
  margin:0!important;
}
html body #page-text-presets .v124-slider-card .number-grid-row[style*="display: none"],
html body #page-text-presets .v124-slider-card .number-grid-row[style*="display:none"]{
  display:none!important;
}
html body #page-text-presets .v124-slider-card .number-grid-field{
  display:block!important;
  align-items:stretch!important;
  min-width:0!important;
  margin:0!important;
  color:var(--aptk-text)!important;
  font:700 9px/1 Inter,sans-serif!important;
  letter-spacing:0!important;
  text-transform:none!important;
}
html body #page-text-presets .v124-slider-card .number-grid-field input{
  width:100%!important;
  min-width:0!important;
  height:36px!important;
  box-sizing:border-box!important;
  padding:0 10px!important;
  border:1px solid var(--aptk-edge-strong)!important;
  border-radius:12px!important;
  background:var(--aptk-secondary)!important;
  color:var(--aptk-text)!important;
  box-shadow:var(--aptk-shadow)!important;
  caret-color:var(--aptk-detail)!important;
  font:650 11px/1 Inter,sans-serif!important;
  outline:0!important;
  opacity:1!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  -moz-appearance:textfield!important;
}
html body #page-text-presets .v124-slider-card .number-grid-field input::placeholder{
  color:var(--aptk-text)!important;
  opacity:.38!important;
}
html body #page-text-presets .v124-slider-card .number-grid-field input:focus{
  border-color:var(--aptk-detail)!important;
  box-shadow:var(--aptk-shadow)!important;
}
html body #page-text-presets .v124-slider-card .number-grid-field input[type="number"]::-webkit-inner-spin-button,
html body #page-text-presets .v124-slider-card .number-grid-field input[type="number"]::-webkit-outer-spin-button{
  margin:0!important;
  -webkit-appearance:none!important;
  appearance:none!important;
}


/* Text > TW: Cursor and Blink speed are part of the main settings card. */
html body #page-text-presets .v124-slider-card .typewriter-options-row:not([style*="display: none"]):not([style*="display:none"]){
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
  margin:0!important;
  align-items:end!important;
}
html body #page-text-presets .v124-slider-card .typewriter-options-row[style*="display: none"],
html body #page-text-presets .v124-slider-card .typewriter-options-row[style*="display:none"]{
  display:none!important;
}
html body #page-text-presets .v124-slider-card .typewriter-option-field{
  display:grid!important;
  grid-template-rows:auto 36px!important;
  gap:5px!important;
  min-width:0!important;
  margin:0!important;
}
html body #page-text-presets .v124-slider-card .typewriter-option-label{
  color:var(--aptk-text)!important;
  opacity:.72!important;
  font:700 9px/1 Inter,sans-serif!important;
  letter-spacing:0!important;
  text-transform:none!important;
}
html body #page-text-presets .v124-slider-card .typewriter-option-field > .aptk-custom-select-trigger,
html body #page-text-presets .v124-slider-card .typewriter-option-field > input{
  width:100%!important;
  min-width:0!important;
  height:36px!important;
  min-height:36px!important;
  box-sizing:border-box!important;
  border:1px solid var(--aptk-edge-strong)!important;
  border-radius:12px!important;
  background:var(--aptk-secondary)!important;
  color:var(--aptk-text)!important;
  box-shadow:var(--aptk-shadow)!important;
  outline:0!important;
}
html body #page-text-presets .v124-slider-card .typewriter-option-field > input{
  padding:0 10px!important;
  caret-color:var(--aptk-detail)!important;
  font:650 11px/1 Inter,sans-serif!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  -moz-appearance:textfield!important;
}
html body #page-text-presets .v124-slider-card .typewriter-option-field > input:focus,
html body #page-text-presets .v124-slider-card .typewriter-option-field > .aptk-custom-select-trigger:focus-visible,
html body #page-text-presets .v124-slider-card .typewriter-option-field > .aptk-custom-select-trigger.is-open{
  border-color:var(--aptk-detail)!important;
  box-shadow:var(--aptk-shadow)!important;
}
html body #page-text-presets .v124-slider-card .typewriter-option-field > input[type="number"]::-webkit-inner-spin-button,
html body #page-text-presets .v124-slider-card .typewriter-option-field > input[type="number"]::-webkit-outer-spin-button{
  margin:0!important;
  -webkit-appearance:none!important;
  appearance:none!important;
}


/* Import label stays clean inside the existing Text rail button. */
html body #v120App #v120Content #page-text-presets #addTextPresetBtn > span{
  font-size:11px!important;line-height:1!important;white-space:nowrap!important;
}

/* Graph Value / Speed edge drawer v7.
   The handle and the button drawer are separate physical elements. The drawer
   begins beyond the collapsed 10px clip, so an active accent chip can never
   leave a fragment behind while the close animation runs. */
html body #page-graph-editor .graph-square-wrap > #graphModeToggle,
html body #v120App #v120Content #page-graph-editor .graph-square-wrap > #graphModeToggle{
  position:absolute!important;left:8px!important;top:8px!important;right:auto!important;bottom:auto!important;transform:none!important;
  display:block!important;grid-template-columns:none!important;gap:0!important;align-items:initial!important;justify-content:initial!important;
  width:10px!important;min-width:10px!important;max-width:10px!important;height:30px!important;min-height:30px!important;max-height:30px!important;
  margin:0!important;padding:0!important;border:0!important;border-radius:9px!important;background:transparent!important;background-image:none!important;
  box-shadow:none!important;overflow:hidden!important;opacity:.76!important;z-index:90!important;box-sizing:border-box!important;
  transition:width 250ms var(--qx-ease),min-width 250ms var(--qx-ease),max-width 250ms var(--qx-ease),background-color 170ms ease,box-shadow 170ms ease,opacity 170ms ease!important;
}
html body #page-graph-editor #graphModeToggle .graph-mode-handle{
  position:absolute!important;left:3px!important;top:4px!important;width:4px!important;height:22px!important;border-radius:999px!important;
  background:var(--qwix-ink-tertiary,rgba(244,244,245,.42))!important;box-shadow:none!important;opacity:1!important;pointer-events:none!important;
  transition:opacity 110ms ease!important;
}
html body #page-graph-editor #graphModeToggle .graph-mode-drawer{
  position:absolute!important;left:12px!important;top:0!important;width:120px!important;height:32px!important;padding:4px!important;
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:4px!important;align-items:center!important;
  border:0!important;border-radius:9px!important;background:var(--qwix-surface-raised,var(--aptk-secondary))!important;
  box-shadow:var(--qwix-shadow-card,0 7px 18px rgba(0,0,0,.20))!important;box-sizing:border-box!important;
  opacity:0!important;visibility:hidden!important;transform:translateX(-8px) scaleX(.96)!important;transform-origin:left center!important;pointer-events:none!important;
  transition:opacity 145ms ease,transform 240ms var(--qx-ease),visibility 0s linear 250ms!important;
}
html body #page-graph-editor #graphModeToggle:hover,
html body #v120App #v120Content #page-graph-editor #graphModeToggle:hover{
  width:132px!important;min-width:132px!important;max-width:132px!important;opacity:1!important;
}
html body #page-graph-editor #graphModeToggle:hover .graph-mode-handle{opacity:0!important}
html body #page-graph-editor #graphModeToggle:hover .graph-mode-drawer{
  opacity:1!important;visibility:visible!important;transform:translateX(0) scaleX(1)!important;pointer-events:auto!important;
  transition:opacity 160ms ease 35ms,transform 250ms var(--qx-ease),visibility 0s linear 0s!important;
}
html body #v120App #v120Content #page-graph-editor #graphModeToggle .graph-mode-btn,
html body #page-graph-editor #graphModeToggle .graph-mode-btn{
  width:100%!important;min-width:0!important;max-width:none!important;height:24px!important;min-height:24px!important;max-height:24px!important;
  margin:0!important;padding:0 7px!important;border:0!important;outline:0!important;border-radius:8px!important;
  background:transparent!important;background-image:none!important;box-shadow:none!important;color:var(--aptk-text)!important;
  font:750 9px/24px Inter,Arial,sans-serif!important;text-align:center!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:clip!important;
  cursor:pointer!important;transition:background-color 150ms ease,color 150ms ease,transform 130ms ease!important;
}
html body #v120App #v120Content #page-graph-editor #graphModeToggle .graph-mode-btn:hover,
html body #page-graph-editor #graphModeToggle .graph-mode-btn:hover{background:var(--qwix-surface-hover,rgba(255,255,255,.07))!important;transform:none!important}
html body #v120App #v120Content #page-graph-editor #graphModeToggle .graph-mode-btn.is-active,
html body #v120App #v120Content #page-graph-editor #graphModeToggle .graph-mode-btn.active,
html body #page-graph-editor #graphModeToggle .graph-mode-btn.is-active,
html body #page-graph-editor #graphModeToggle .graph-mode-btn.active{
  background:var(--aptk-primary,var(--aptk-detail))!important;color:var(--qwix-accent-ink,#241C16)!important;box-shadow:none!important;
}
html body #v120App #v120Content #page-graph-editor #graphModeToggle .graph-mode-btn::before,
html body #v120App #v120Content #page-graph-editor #graphModeToggle .graph-mode-btn::after,
html body #page-graph-editor #graphModeToggle .graph-mode-btn::before,
html body #page-graph-editor #graphModeToggle .graph-mode-btn::after{display:none!important;content:none!important}
html body #v120App #v120Content #page-graph-editor #graphModeToggle .graph-mode-btn:focus,
html body #v120App #v120Content #page-graph-editor #graphModeToggle .graph-mode-btn:focus-visible,
html body #page-graph-editor #graphModeToggle .graph-mode-btn:focus,
html body #page-graph-editor #graphModeToggle .graph-mode-btn:focus-visible{outline:0!important;box-shadow:none!important}

/* Graph Presets / Motion are two real pages selected from the same detached,
   hover-reveal menu language used by Library / Match / Palette in Colors. */
html body #v120App #v120Content #page-graph-editor .graph-right-pane,
html body #page-graph-editor .graph-right-pane{min-height:0!important;overflow:hidden!important}
html body #page-graph-editor #qxGraphToolbar.qx-graph-toolbar{
  display:block!important;width:100%!important;box-sizing:border-box!important;padding:0 0 8px!important;margin:0!important;background:transparent!important;
}
html body #page-graph-editor #qxGraphToolbar .qx-graph-actions-hidden{display:none!important;visibility:hidden!important;pointer-events:none!important}
html body #page-graph-editor #qxGraphPaneToggle.qx-graph-page-tabs{
  position:relative!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px!important;
  width:100%!important;height:auto!important;max-height:10px!important;min-height:10px!important;margin:0!important;padding:0!important;
  overflow:hidden!important;border:1px solid var(--qwix-border-subtle,rgba(255,255,255,.08))!important;border-radius:999px!important;
  background:var(--qwix-surface-soft,rgba(255,255,255,.035))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)!important;
  transition:max-height .52s cubic-bezier(.2,.78,.22,1),min-height .52s cubic-bezier(.2,.78,.22,1),padding .52s cubic-bezier(.2,.78,.22,1),border-radius .52s cubic-bezier(.2,.78,.22,1),background .38s ease,border-color .38s ease!important;
}
html body #page-graph-editor #qxGraphPaneToggle.qx-graph-page-tabs::before{
  content:""!important;position:absolute!important;left:50%!important;top:50%!important;width:34px!important;height:4px!important;border-radius:999px!important;
  transform:translate(-50%,-50%)!important;background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.12))!important;
  box-shadow:0 1px 3px rgba(0,0,0,.18)!important;opacity:.95!important;pointer-events:none!important;
  transition:opacity .28s ease,transform .52s cubic-bezier(.2,.78,.22,1)!important;
}
html[data-qwix-tone="light"] body #page-graph-editor #qxGraphPaneToggle.qx-graph-page-tabs::before,
html[data-aptk-mode="suede"] body #page-graph-editor #qxGraphPaneToggle.qx-graph-page-tabs::before{
  background:linear-gradient(180deg,rgba(76,58,37,.28),rgba(76,58,37,.12))!important;
}
html body #page-graph-editor #qxGraphPaneToggle.qx-graph-page-tabs:hover{
  max-height:40px!important;min-height:40px!important;padding:3px!important;border-radius:11px!important;
  background:var(--qwix-surface-soft,rgba(0,0,0,.14))!important;border-color:var(--qwix-border,var(--aptk-edge))!important;box-shadow:none!important;
}
html body #page-graph-editor #qxGraphPaneToggle.qx-graph-page-tabs:hover::before{opacity:0!important;transform:translate(-50%,-95%)!important}
html body #page-graph-editor #qxGraphPaneToggle .qx-graph-page-tab{
  width:100%!important;min-width:0!important;height:32px!important;min-height:32px!important;margin:0!important;padding:0 10px!important;
  border:0!important;border-radius:8px!important;background:transparent!important;background-image:none!important;box-shadow:none!important;
  color:var(--qwix-ink-tertiary,var(--aptk-muted))!important;font:750 10px/32px Inter,Arial,sans-serif!important;text-align:center!important;white-space:nowrap!important;
  opacity:0!important;transform:translateY(-7px)!important;pointer-events:none!important;outline:0!important;
  transition:opacity .30s ease .10s,transform .52s cubic-bezier(.2,.78,.22,1),background-color .18s ease,color .18s ease!important;
}
html body #page-graph-editor #qxGraphPaneToggle:hover .qx-graph-page-tab{opacity:1!important;transform:translateY(0)!important;pointer-events:auto!important}
html body #page-graph-editor #qxGraphPaneToggle .qx-graph-page-tab:hover{background:var(--qwix-surface-hover,rgba(255,255,255,.07))!important;color:var(--qwix-ink,var(--aptk-text))!important}
html body #page-graph-editor #qxGraphPaneToggle .qx-graph-page-tab.is-active{
  background:var(--aptk-primary,var(--aptk-detail))!important;color:var(--qwix-accent-ink,#241C16)!important;
}
/* Focus never pins the detached menu open after the pointer leaves. */
html body #page-graph-editor #qxGraphPaneToggle.qx-graph-page-tabs:focus-within:not(:hover){
  max-height:10px!important;min-height:10px!important;padding:0!important;border-radius:999px!important;background:var(--qwix-surface-soft,rgba(255,255,255,.035))!important;
}
html body #page-graph-editor #qxGraphPaneToggle.qx-graph-page-tabs:focus-within:not(:hover)::before{opacity:.95!important;transform:translate(-50%,-50%)!important}
html body #page-graph-editor #qxGraphPaneToggle.qx-graph-page-tabs:focus-within:not(:hover) .qx-graph-page-tab{opacity:0!important;transform:translateY(-7px)!important;pointer-events:none!important}

html body #page-graph-editor .qx-graph-page{min-height:0!important}
html body #page-graph-editor #graphPresetGrid.qx-graph-page{overflow:auto!important}
html body #page-graph-editor #qxGraphMotion.qx-graph-motion{
  flex:1 1 auto!important;min-height:180px!important;align-content:center!important;gap:16px!important;padding:14px!important;
}
html body #page-graph-editor .qx-motion-ball{
  background:var(--aptk-detail,var(--aptk-primary))!important;
  box-shadow:0 0 24px var(--aptk-detail-glow,var(--aptk-primary-glow,rgba(217,119,87,.28)))!important;
}


/* ===== Graph pages + context menus final correction =====
   1) Presets and Motion are mutually exclusive pages even though older Graph
      CSS forces the preset grid to display:grid !important.
   2) Graph and Text preset menus use the same flat item treatment as Colors:
      one outer panel, no rounded plate/border behind each label. */
html body #page-graph-editor #graphPresetGrid.qx-graph-page[hidden],
html body #page-graph-editor #qxGraphMotion.qx-graph-page[hidden]{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
html body #page-graph-editor #graphPresetGrid.qx-graph-page.is-active:not([hidden]){
  display:grid!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
html body #page-graph-editor #qxGraphMotion.qx-graph-page.is-active:not([hidden]){
  display:grid!important;
  visibility:visible!important;
  pointer-events:auto!important;
}

html body .saved-asset-context-menu.qx-colors-context-menu{
  position:fixed!important;
  z-index:999999!important;
  width:max-content!important;
  min-width:104px!important;
  max-width:min(220px,calc(100vw - 16px))!important;
  max-height:220px!important;
  padding:6px!important;
  display:grid!important;
  gap:1px!important;
  overflow:auto!important;
  border:1px solid var(--qwix-border,rgba(255,255,255,.10))!important;
  border-radius:10px!important;
  background:var(--aptk-block,#202124)!important;
  background-image:none!important;
  color:var(--qwix-ink,#f4f4f5)!important;
  box-shadow:0 18px 36px -14px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.04)!important;
  backdrop-filter:none!important;
  opacity:1!important;
  transform:translateY(0) scale(1)!important;
  transform-origin:top center!important;
  transition:opacity 170ms var(--qwix-motion-ease,ease),transform 210ms var(--qwix-motion-bounce,cubic-bezier(.2,.9,.2,1)),border-radius 210ms var(--qwix-motion-out,ease)!important;
}
html body .saved-asset-context-menu.qx-colors-context-menu.qwix-dropdown-motion-enter{
  opacity:0!important;
  transform:translateY(-3px) scaleX(.975) scaleY(.92)!important;
  border-radius:13px!important;
}
html body .saved-asset-context-menu.qx-colors-context-menu.qwix-dropdown-motion-leave{
  opacity:0!important;
  transform:translateY(-2px) scaleX(.985) scaleY(.95)!important;
  pointer-events:none!important;
}
html body .saved-asset-context-menu.qx-colors-context-menu > button.saved-asset-menu-btn,
html body .saved-asset-context-menu.qx-colors-context-menu > .saved-asset-menu-btn{
  appearance:none!important;
  -webkit-appearance:none!important;
  display:block!important;
  width:100%!important;
  height:27px!important;
  min-height:27px!important;
  max-height:27px!important;
  margin:0!important;
  padding:0 10px!important;
  border:0!important;
  outline:0!important;
  border-radius:7px!important;
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  filter:none!important;
  color:var(--qwix-ink-tertiary,rgba(244,244,245,.62))!important;
  font:750 10px/27px Inter,Arial,sans-serif!important;
  text-align:left!important;
  text-shadow:none!important;
  cursor:pointer!important;
  transform:none!important;
  transition:color 120ms ease,background-color 120ms ease,transform 130ms var(--qwix-motion-out,ease)!important;
}
html body .saved-asset-context-menu.qx-colors-context-menu > .saved-asset-menu-btn::before,
html body .saved-asset-context-menu.qx-colors-context-menu > .saved-asset-menu-btn::after,
html body .saved-asset-context-menu.qx-colors-context-menu > .saved-asset-menu-btn > span::before,
html body .saved-asset-context-menu.qx-colors-context-menu > .saved-asset-menu-btn > span::after{
  content:none!important;
  display:none!important;
  border:0!important;
  background:none!important;
  box-shadow:none!important;
}
html body .saved-asset-context-menu.qx-colors-context-menu > .saved-asset-menu-btn:hover,
html body .saved-asset-context-menu.qx-colors-context-menu > .saved-asset-menu-btn:focus-visible{
  border:0!important;
  outline:0!important;
  background:var(--qwix-surface-hover,rgba(255,255,255,.065))!important;
  background-image:none!important;
  box-shadow:none!important;
  color:var(--qwix-ink,var(--aptk-text,#f4f4f5))!important;
  transform:translateX(2px)!important;
}
html body .saved-asset-context-menu.qx-colors-context-menu > .saved-asset-menu-btn.is-danger:hover,
html body .saved-asset-context-menu.qx-colors-context-menu > .saved-asset-menu-btn-danger:hover{
  background:rgba(255,76,76,.13)!important;
  color:#ffb0b0!important;
}

/* ===== Graph Motion spacing + Colors switch parity (2026-07-14 v9) =====
   Presets / Motion intentionally mirrors the detached Library / Match / Palette
   control in Colors. Motion content starts one standard gap below the switch. */
html body #page-graph-editor #qxGraphToolbar.qx-graph-toolbar{
  display:block!important;
  width:100%!important;
  box-sizing:border-box!important;
  margin:0!important;
  padding:0 0 8px 0!important;
  background:transparent!important;
}
html body #page-graph-editor #qxGraphPaneToggle.qx-graph-page-tabs{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:5px!important;
  flex:0 0 auto!important;
  position:relative!important;
  width:100%!important;
  height:auto!important;
  max-height:10px!important;
  min-height:10px!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.035)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03)!important;
  transition:
    max-height .52s cubic-bezier(.2,.78,.22,1),
    min-height .52s cubic-bezier(.2,.78,.22,1),
    padding .52s cubic-bezier(.2,.78,.22,1),
    border-radius .52s cubic-bezier(.2,.78,.22,1),
    background .38s ease,
    border-color .38s ease,
    box-shadow .38s ease!important;
}
html body #page-graph-editor #qxGraphPaneToggle.qx-graph-page-tabs::before{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:34px!important;
  height:4px!important;
  border-radius:999px!important;
  transform:translate(-50%,-50%)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.12))!important;
  box-shadow:0 1px 3px rgba(0,0,0,.18)!important;
  opacity:.95!important;
  transition:opacity .28s ease,transform .42s cubic-bezier(.22,.84,.28,1)!important;
  pointer-events:none!important;
}
html[data-qwix-tone="light"] body #page-graph-editor #qxGraphPaneToggle.qx-graph-page-tabs::before,
html[data-aptk-mode="suede"] body #page-graph-editor #qxGraphPaneToggle.qx-graph-page-tabs::before{
  background:linear-gradient(180deg,rgba(76,58,37,.28),rgba(76,58,37,.12))!important;
}
html body #page-graph-editor #qxGraphPaneToggle .qx-graph-page-tab{
  appearance:none!important;
  width:100%!important;
  min-width:0!important;
  height:28px!important;
  min-height:28px!important;
  max-height:28px!important;
  margin:0!important;
  padding:0 8px!important;
  border:0!important;
  border-radius:8px!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  color:var(--aptk-muted,#9b9da3)!important;
  font:800 8px/1 Inter,sans-serif!important;
  letter-spacing:.04em!important;
  text-transform:uppercase!important;
  text-align:center!important;
  white-space:nowrap!important;
  cursor:pointer!important;
  outline:0!important;
  opacity:0!important;
  transform:translateY(-7px)!important;
  pointer-events:none!important;
  transition:
    opacity .30s ease .10s,
    transform .52s cubic-bezier(.2,.78,.22,1),
    background .18s ease,
    color .18s ease,
    box-shadow .18s ease!important;
}
html body #page-graph-editor #qxGraphPaneToggle .qx-graph-page-tab.is-active{
  background:var(--aptk-secondary,#2a2b2e)!important;
  color:var(--aptk-text,#f4f4f5)!important;
  box-shadow:var(--aptk-hard-shadow-soft,0 2px 5px rgba(0,0,0,.28))!important;
}
html body #page-graph-editor #qxGraphPaneToggle .qx-graph-page-tab:hover{
  background:var(--qwix-surface-hover,rgba(255,255,255,.07))!important;
  color:var(--aptk-text,#f4f4f5)!important;
}
html body #page-graph-editor #qxGraphPaneToggle.qx-graph-page-tabs:hover{
  max-height:40px!important;
  min-height:40px!important;
  padding:3px!important;
  border-radius:11px!important;
  background:rgba(0,0,0,.14)!important;
  border-color:var(--aptk-edge,rgba(255,255,255,.1))!important;
  box-shadow:none!important;
}
html body #page-graph-editor #qxGraphPaneToggle.qx-graph-page-tabs:hover::before{
  opacity:0!important;
  transform:translate(-50%,-95%)!important;
}
html body #page-graph-editor #qxGraphPaneToggle.qx-graph-page-tabs:hover .qx-graph-page-tab{
  opacity:1!important;
  transform:translateY(0)!important;
  pointer-events:auto!important;
}
/* Pointer leave closes it even when a clicked tab still owns keyboard focus. */
html body #page-graph-editor #qxGraphPaneToggle.qx-graph-page-tabs:focus-within:not(:hover){
  max-height:10px!important;
  min-height:10px!important;
  padding:0!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.035)!important;
  border-color:rgba(255,255,255,.08)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03)!important;
}
html body #page-graph-editor #qxGraphPaneToggle.qx-graph-page-tabs:focus-within:not(:hover)::before{
  opacity:.95!important;
  transform:translate(-50%,-50%)!important;
}
html body #page-graph-editor #qxGraphPaneToggle.qx-graph-page-tabs:focus-within:not(:hover) .qx-graph-page-tab{
  opacity:0!important;
  transform:translateY(-7px)!important;
  pointer-events:none!important;
}

/* No vertical centering: the track sits directly below the switch. */
html body #page-graph-editor #qxGraphMotion.qx-graph-motion.qx-graph-page.is-active:not([hidden]){
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  align-items:stretch!important;
  align-content:normal!important;
  flex:0 0 auto!important;
  width:100%!important;
  min-height:0!important;
  height:auto!important;
  margin:0!important;
  padding:0 10px!important;
  gap:8px!important;
  overflow:visible!important;
}
html body #page-graph-editor #qxGraphMotion .qx-motion-track{
  flex:0 0 4px!important;
  width:100%!important;
  margin:0!important;
}
html body #page-graph-editor #qxGraphMotion .qx-motion-caption{
  margin:0!important;
  padding:0!important;
}

/* Exact Colors tab treatment: no extra hover plate; active keeps the same
   Style Lab secondary surface used by Library / Match / Palette. */
html body #page-graph-editor #qxGraphPaneToggle .qx-graph-page-tab:hover{
  background:transparent!important;
  color:var(--aptk-muted,#9b9da3)!important;
  box-shadow:none!important;
}
html body #page-graph-editor #qxGraphPaneToggle .qx-graph-page-tab.is-active:hover{
  background:var(--aptk-secondary,#2a2b2e)!important;
  color:var(--aptk-text,#f4f4f5)!important;
  box-shadow:var(--aptk-hard-shadow-soft,0 2px 5px rgba(0,0,0,.28))!important;
}
/* The moving ball overhangs its 4px track by 6px, so 6px internal top space
   preserves the same visible 8px rhythm as the Colors workspace. */
html body #page-graph-editor #qxGraphMotion.qx-graph-motion.qx-graph-page.is-active:not([hidden]){
  padding:6px 10px 0!important;
  gap:14px!important;
}

/* ===== Graph presets scroll + compact page switch + larger motion preview (2026-07-14 v10) ===== */
/* Keep the page switch visible while the preset grid itself scrolls. */
html body #v120App #v120Content #page-graph-editor .graph-right-pane,
html body #page-graph-editor .graph-right-pane{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  min-height:0!important;
  overflow:hidden!important;
}
html body #page-graph-editor #qxGraphToolbar.qx-graph-toolbar{
  flex:0 0 auto!important;
  padding:0 0 6px 0!important;
}
html body #page-graph-editor #graphPresetGrid.qx-graph-page.is-active:not([hidden]){
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:100%!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  align-content:start!important;
  padding-right:2px!important;
  overscroll-behavior:contain!important;
}
html body #page-graph-editor #graphPresetGrid.qx-graph-page.is-active:not([hidden])::-webkit-scrollbar{
  width:4px!important;
}
html body #page-graph-editor #graphPresetGrid.qx-graph-page.is-active:not([hidden])::-webkit-scrollbar-track{
  background:transparent!important;
}
html body #page-graph-editor #graphPresetGrid.qx-graph-page.is-active:not([hidden])::-webkit-scrollbar-thumb{
  background:var(--qwix-ink-tertiary,rgba(244,244,245,.36))!important;
  border-radius:999px!important;
}

/* The expanded switch is intentionally more compact than before. */
html body #page-graph-editor #qxGraphPaneToggle.qx-graph-page-tabs:hover{
  max-height:32px!important;
  min-height:32px!important;
  padding:2px!important;
  border-radius:10px!important;
}
html body #page-graph-editor #qxGraphPaneToggle .qx-graph-page-tab{
  height:26px!important;
  min-height:26px!important;
  max-height:26px!important;
  border-radius:8px!important;
  line-height:26px!important;
}

/* Motion is a genuine second page and fills the remaining card space. */
html body #page-graph-editor #qxGraphMotion.qx-graph-motion.qx-graph-page.is-active:not([hidden]){
  display:flex!important;
  flex:1 1 auto!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  align-items:stretch!important;
  min-height:0!important;
  width:100%!important;
  margin:0!important;
  padding:16px 16px 0!important;
  gap:16px!important;
  overflow:visible!important;
}
html body #page-graph-editor #qxGraphMotion .qx-motion-track{
  position:relative!important;
  flex:0 0 8px!important;
  width:calc(100% - 32px)!important;
  height:8px!important;
  min-height:8px!important;
  margin:0 16px!important;
  border-radius:999px!important;
}
html body #page-graph-editor #qxGraphMotion .qx-motion-ball{
  width:32px!important;
  height:32px!important;
  min-width:32px!important;
  min-height:32px!important;
  border-radius:50%!important;
  background:var(--aptk-detail,var(--aptk-primary))!important;
  box-shadow:0 0 28px var(--aptk-detail-glow,var(--aptk-primary-glow,rgba(217,119,87,.28)))!important;
}
html body #page-graph-editor #qxGraphMotion .qx-motion-caption{
  margin:0!important;
  padding:0!important;
}


/* ===== Graph Motion full-width track + original ball size (2026-07-14 v11) =====
   The travel path follows the width of the Presets / Motion switch. The ball
   returns to its original compact size while the thicker track is preserved. */
html body #page-graph-editor #qxGraphMotion.qx-graph-motion.qx-graph-page.is-active:not([hidden]){
  padding:12px 8px 0!important;
  gap:14px!important;
}
html body #page-graph-editor #qxGraphMotion .qx-motion-track{
  flex:0 0 8px!important;
  width:calc(100% - 16px)!important;
  height:8px!important;
  min-height:8px!important;
  margin:0 8px!important;
}
html body #page-graph-editor #qxGraphMotion .qx-motion-ball{
  width:16px!important;
  height:16px!important;
  min-width:16px!important;
  min-height:16px!important;
  box-shadow:0 0 22px var(--aptk-detail-glow,var(--aptk-primary-glow,rgba(217,119,87,.28)))!important;
}

/* ===== Text Edit: layer-aware preset picker (2026-07-15) ===== */
html body #page-text-presets #presetGrid .text-edit-preset-card{
  order:-10000!important;
  flex:0 0 auto!important;
}
html body #page-text-presets #presetGrid .text-edit-preset-card .text-edit-preset-label{
  font-size:10px!important;
  font-weight:850!important;
  letter-spacing:-.02em!important;
  text-transform:none!important;
}
html body #page-text-presets #presetGrid .text-edit-preset-card.active .text-edit-preset-label{
  font-size:10px!important;
  color:#fff!important;
}

html body #page-text-presets #textEditPresetPicker.text-edit-preset-picker{
  order:0!important;
  display:none;
  align-self:stretch!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;
  /* 12px / 2 is deliberate: AE 2023's older Chromium occasionally rasterizes
     999px on a transformed 12px box with a flat last row of pixels. */
  border-radius:6px!important;
  overflow:visible!important;
}
html body #page-text-presets.text-edit-active #textEditPresetPicker.text-edit-preset-picker{
  display:block;
}
html body #page-text-presets #textEditPresetTabs.text-edit-preset-tabs{
  --text-edit-option-count:1;
  position:relative!important;
  z-index:0!important;
  display:grid!important;
  grid-template-columns:repeat(var(--text-edit-option-count),minmax(0,1fr))!important;
  gap:5px!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:auto!important;
  max-height:12px!important;
  min-height:12px!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:999px!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  isolation:isolate!important;
  -webkit-clip-path:none!important;
  clip-path:none!important;
  transition:max-height .46s cubic-bezier(.2,.78,.22,1),min-height .46s cubic-bezier(.2,.78,.22,1),padding .46s cubic-bezier(.2,.78,.22,1),border-radius .46s cubic-bezier(.2,.78,.22,1)!important;
}
/* A separate painted pill avoids the straight lower edge that old CEP
   Chromium can produce when a 10px bordered element changes height. */
html body #page-text-presets #textEditPresetTabs.text-edit-preset-tabs::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  border-radius:999px!important;
  background:var(--qwix-surface-soft,rgba(255,255,255,.035))!important;
  box-shadow:inset 0 0 0 1px var(--qwix-border-subtle,rgba(255,255,255,.08)),inset 0 1px 0 rgba(255,255,255,.03)!important;
  pointer-events:none!important;
  transition:border-radius .46s cubic-bezier(.2,.78,.22,1),background .32s ease,box-shadow .32s ease!important;
}
html body #page-text-presets #textEditPresetTabs.text-edit-preset-tabs::before{
  content:""!important;
  position:absolute!important;
  z-index:3!important;
  left:50%!important;
  top:50%!important;
  width:34px!important;
  height:4px!important;
  border-radius:999px!important;
  transform:translate(-50%,-50%)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.12))!important;
  box-shadow:0 1px 3px rgba(0,0,0,.18)!important;
  opacity:.95!important;
  pointer-events:none!important;
  transition:opacity .24s ease,transform .46s cubic-bezier(.2,.78,.22,1)!important;
}
html body #page-text-presets #textEditPresetTabs.text-edit-preset-tabs:hover{
  max-height:40px!important;
  min-height:40px!important;
  padding:3px!important;
  border-radius:12px!important;
}
html body #page-text-presets #textEditPresetTabs.text-edit-preset-tabs:hover::after{
  border-radius:12px!important;
  background:var(--qwix-surface-soft,rgba(0,0,0,.14))!important;
  box-shadow:inset 0 0 0 1px var(--qwix-border,var(--aptk-edge))!important;
}
html body #page-text-presets #textEditPresetTabs.text-edit-preset-tabs:hover::before{
  opacity:0!important;
  transform:translate(-50%,-95%)!important;
}
html body #page-text-presets #textEditPresetTabs .text-edit-preset-option{
  position:relative!important;
  z-index:2!important;
  width:100%!important;
  min-width:0!important;
  height:32px!important;
  min-height:32px!important;
  margin:0!important;
  padding:0 10px!important;
  border:0!important;
  border-radius:8px!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  color:var(--qwix-ink-tertiary,var(--aptk-muted))!important;
  font:750 10px/32px Inter,Arial,sans-serif!important;
  text-align:center!important;
  white-space:nowrap!important;
  opacity:0!important;
  transform:translateY(-6px)!important;
  pointer-events:none!important;
  outline:0!important;
  transition:opacity .24s ease .08s,transform .46s cubic-bezier(.2,.78,.22,1),background-color .18s ease,color .18s ease,box-shadow .18s ease!important;
}
html body #page-text-presets #textEditPresetTabs:hover .text-edit-preset-option{
  opacity:1!important;
  transform:translateY(0)!important;
  pointer-events:auto!important;
}
html body #page-text-presets #textEditPresetTabs .text-edit-preset-option:hover{
  background:var(--qwix-surface-hover,rgba(255,255,255,.07))!important;
  color:var(--qwix-ink,var(--aptk-text))!important;
}
html body #page-text-presets #textEditPresetTabs .text-edit-preset-option.is-active{
  background:var(--aptk-primary,var(--aptk-detail))!important;
  color:var(--qwix-accent-ink,#241C16)!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.06),0 5px 14px rgba(0,0,0,.13)!important;
}
html body #page-text-presets #textEditPresetTabs.text-edit-preset-tabs:focus-within:not(:hover){
  max-height:12px!important;
  min-height:12px!important;
  padding:0!important;
  border-radius:999px!important;
}
html body #page-text-presets #textEditPresetTabs.text-edit-preset-tabs:focus-within:not(:hover)::after{
  border-radius:999px!important;
  background:var(--qwix-surface-soft,rgba(255,255,255,.035))!important;
  box-shadow:inset 0 0 0 1px var(--qwix-border-subtle,rgba(255,255,255,.08)),inset 0 1px 0 rgba(255,255,255,.03)!important;
}
html body #page-text-presets #textEditPresetTabs.text-edit-preset-tabs:focus-within:not(:hover)::before{
  opacity:.95!important;
  transform:translate(-50%,-50%)!important;
}
html body #page-text-presets #textEditPresetTabs.text-edit-preset-tabs:focus-within:not(:hover) .text-edit-preset-option{
  opacity:0!important;
  transform:translateY(-6px)!important;
  pointer-events:none!important;
}

html body #page-text-presets.text-edit-empty #presetStage{
  display:none!important;
}
html body #page-text-presets.text-edit-empty #smartRevealControls,
html body #page-text-presets.text-edit-empty #customFfxControls,
html body #page-text-presets.text-edit-empty #textEditPresetPicker{
  display:none!important;
}
html body #page-text-presets #textEditMessage.text-edit-message{
  order:1!important;
  width:100%!important;
  height:128px!important;
  min-height:128px!important;
  max-height:128px!important;
  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:var(--qwix-ink-tertiary,var(--aptk-muted))!important;
  font-size:11px!important;
  font-weight:750!important;
  line-height:1.35!important;
  box-shadow:none!important;
}
html body #page-text-presets.text-edit-active #smartMode:disabled{
  opacity:1!important;
  color:inherit!important;
  cursor:default!important;
  -webkit-text-fill-color:currentColor!important;
}
html[data-qwix-tone="light"] body #page-text-presets #textEditPresetTabs.text-edit-preset-tabs::before,
html[data-aptk-mode="suede"] body #page-text-presets #textEditPresetTabs.text-edit-preset-tabs::before{
  background:linear-gradient(180deg,rgba(76,58,37,.28),rgba(76,58,37,.12))!important;
}

/* Save and Import stay available in Edit; only the technical file row is hidden. */
html body #page-text-presets.text-edit-active #saveTextPresetBtn,
html body #page-text-presets.text-edit-active #addTextPresetBtn{
  display:inline-flex!important;
}
html body #page-text-presets.text-edit-active .meta-row{
  display:none!important;
}
html body #page-text-presets.text-edit-empty #applySelectedPresetBtn{
  display:none!important;
}
html body #page-text-presets.text-edit-active:not(.text-edit-empty) #applySelectedPresetBtn{
  display:inline-flex!important;
}


/* Text Edit restores slider/select values from the selected AE layer. Keep
   those child controls visually frozen for the hydration frame; the outer
   Edit blocks still use their normal entrance animation. This mirrors the
   stable Expressions Edit path. */
html body #page-text-presets.text-edit-hydrating .qwix-slider-visual-fill,
html body #page-text-presets.text-edit-hydrating .qwix-slider-visual-thumb,
html body #page-text-presets.text-edit-hydrating .qwix-slider-visual-preview,
html body #page-text-presets.text-edit-hydrating .qwix-slider-visual-track,
html body #page-text-presets.text-edit-hydrating .qwix-slider-shell,
html body #page-text-presets.text-edit-hydrating input[type="range"],
html body #page-text-presets.text-edit-hydrating .aptk-custom-select-trigger,
html body #page-text-presets.text-edit-hydrating .aptk-custom-select-value,
html body #page-text-presets.text-edit-hydrating .toggle-switch,
html body #page-text-presets.text-edit-hydrating .toggle-switch::before{
  transition:none!important;
}
html body #page-text-presets.text-edit-hydrating .qwix-slider-visual-fill,
html body #page-text-presets.text-edit-hydrating .qwix-slider-visual-thumb,
html body #page-text-presets.text-edit-hydrating .qwix-slider-visual-preview{
  animation:none!important;
}

/* ===== Text Edit: smooth state and preset transitions (2026-07-15) ===== */
@keyframes qwix-text-edit-enter{
  0%{opacity:0;transform:translate3d(0,11px,0) scale(.995)}
  72%{opacity:1;transform:translate3d(0,-.5px,0) scale(1.0004)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
@keyframes qwix-text-edit-leave{
  0%{opacity:1;transform:translate3d(0,0,0) scale(1)}
  100%{opacity:0;transform:translate3d(0,-4px,0) scale(.998)}
}
html.qwix-motion-enabled body #page-text-presets .qwix-text-edit-enter-prepared{
  opacity:0!important;
  transform:translate3d(0,9px,0)!important;
  pointer-events:none!important;
}
html.qwix-motion-enabled body #page-text-presets .qwix-text-edit-enter-item{
  animation:qwix-text-edit-enter 360ms cubic-bezier(.2,.78,.22,1) both!important;
  animation-delay:calc(var(--qwix-text-edit-order,0) * 17ms)!important;
  will-change:opacity,transform;
}
html.qwix-motion-enabled body #page-text-presets .qwix-text-edit-leave-item{
  animation:qwix-text-edit-leave 105ms ease-in both!important;
  pointer-events:none!important;
  will-change:opacity,transform;
}
html body #page-text-presets #textEditPresetTabs .text-edit-preset-option{
  transition:opacity .30s ease .10s,transform .52s cubic-bezier(.2,.78,.22,1),background-color .22s ease,color .22s ease,box-shadow .22s ease!important;
}
html body #page-text-presets #textEditPresetTabs .text-edit-preset-option.is-active{
  box-shadow:0 0 0 1px rgba(255,255,255,.06),0 5px 14px rgba(0,0,0,.13)!important;
}
@media (prefers-reduced-motion:reduce){
  html.qwix-motion-enabled body #page-text-presets .qwix-text-edit-enter-item,
  html.qwix-motion-enabled body #page-text-presets .qwix-text-edit-leave-item{
    animation:none!important;
  }
  html.qwix-motion-enabled body #page-text-presets .qwix-text-edit-enter-prepared{
    opacity:1!important;
    transform:none!important;
  }
}


/* ===== Text Edit empty state + stable dropdown grid (2026-07-15) ===== */
html body #page-text-presets.text-edit-empty #textEditMessage.text-edit-message{
  flex:1 1 auto!important;
  align-self:stretch!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  pointer-events:none!important;
}
html body #page-text-presets #v121SmartTopControls,
html body #page-text-presets #v121CustomTopControls,
html body #page-text-presets .smart-select-row{
  width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
}
html body #page-text-presets #v121SmartTopControls > .aptk-custom-select-trigger,
html body #page-text-presets #v121CustomTopControls > .aptk-custom-select-trigger,
html body #page-text-presets .smart-select-row > .aptk-custom-select-trigger{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  justify-self:stretch!important;
  box-sizing:border-box!important;
}



/* ===== Text Edit real collapsed handle + page-identical preset motion (2026-07-16 v8) =====
   The collapsed pill is a real 12px element, not a clipped 32px grid. This is
   reliable in the old Chromium embedded in AE 2023 and keeps all four corners
   rounded. */
html body #page-text-presets #textEditPresetPicker.text-edit-preset-picker{
  position:relative!important;
  display:none;
  width:100%!important;
  min-width:0!important;
  height:12px!important;
  min-height:12px!important;
  max-height:12px!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  border:0!important;
  border-radius:6px!important;
  background:transparent!important;
  box-shadow:none!important;
  box-sizing:border-box!important;
  transition:height .46s cubic-bezier(.2,.78,.22,1),min-height .46s cubic-bezier(.2,.78,.22,1),max-height .46s cubic-bezier(.2,.78,.22,1)!important;
}
html body #page-text-presets.text-edit-active #textEditPresetPicker.text-edit-preset-picker{
  display:block;
}
html body #page-text-presets #textEditPresetPicker.text-edit-preset-picker:hover,
html body #page-text-presets #textEditPresetPicker.text-edit-preset-picker:focus-within{
  height:40px!important;
  min-height:40px!important;
  max-height:40px!important;
}
html body #page-text-presets #textEditPresetPicker .text-edit-picker-handle{
  position:absolute!important;
  z-index:2!important;
  left:0!important;
  right:0!important;
  top:0!important;
  height:12px!important;
  min-height:12px!important;
  display:block!important;
  overflow:visible!important;
  border:0!important;
  border-radius:6px!important;
  background:transparent!important;
  box-shadow:none!important;
  opacity:1!important;
  transform:none!important;
  pointer-events:none!important;
  transition:opacity .18s ease!important;
}
/* Paint the collapsed surface one physical pixel above the handle boundary.
   AE 2023's older Chromium clips the last raster row of a transformed 12px
   rounded element; a separate non-transformed surface keeps the lower corners
   genuinely round instead of flattening them. */
html body #page-text-presets #textEditPresetPicker .text-edit-picker-handle::before{
  content:""!important;
  position:absolute!important;
  z-index:0!important;
  left:0!important;
  right:0!important;
  top:0!important;
  bottom:1px!important;
  display:block!important;
  border:0!important;
  border-radius:6px!important;
  background:var(--qwix-surface-soft,rgba(255,255,255,.035))!important;
  box-shadow:inset 0 0 0 1px var(--qwix-border-subtle,rgba(255,255,255,.08)),inset 0 1px 0 rgba(255,255,255,.03)!important;
  transform:none!important;
  pointer-events:none!important;
}
html body #page-text-presets #textEditPresetPicker .text-edit-picker-handle > span{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:34px!important;
  height:4px!important;
  margin:0!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.12))!important;
  box-shadow:0 1px 3px rgba(0,0,0,.18)!important;
  transform:translate(-50%,-50%)!important;
  z-index:1!important;
}
html body #page-text-presets #textEditPresetPicker:hover .text-edit-picker-handle,
html body #page-text-presets #textEditPresetPicker:focus-within .text-edit-picker-handle{
  opacity:0!important;
  transform:none!important;
}
html body #page-text-presets #textEditPresetTabs.text-edit-preset-tabs{
  position:absolute!important;
  z-index:1!important;
  inset:0!important;
  display:grid!important;
  grid-template-columns:repeat(var(--text-edit-option-count),minmax(0,1fr))!important;
  gap:5px!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:40px!important;
  min-height:40px!important;
  max-height:40px!important;
  margin:0!important;
  padding:3px!important;
  overflow:hidden!important;
  border:1px solid var(--qwix-border,var(--aptk-edge))!important;
  border-radius:12px!important;
  background:var(--qwix-surface-soft,rgba(0,0,0,.14))!important;
  box-shadow:none!important;
  box-sizing:border-box!important;
  opacity:0!important;
  transform:translate3d(0,-4px,0) scaleY(.84)!important;
  transform-origin:center top!important;
  pointer-events:none!important;
  transition:opacity .20s ease,transform .46s cubic-bezier(.2,.78,.22,1)!important;
  isolation:isolate!important;
  -webkit-clip-path:none!important;
  clip-path:none!important;
}
html body #page-text-presets #textEditPresetTabs.text-edit-preset-tabs::before,
html body #page-text-presets #textEditPresetTabs.text-edit-preset-tabs::after{
  content:none!important;
  display:none!important;
}
html body #page-text-presets #textEditPresetPicker:hover #textEditPresetTabs.text-edit-preset-tabs,
html body #page-text-presets #textEditPresetPicker:focus-within #textEditPresetTabs.text-edit-preset-tabs{
  opacity:1!important;
  transform:translate3d(0,0,0) scaleY(1)!important;
  pointer-events:auto!important;
}
html body #page-text-presets #textEditPresetTabs .text-edit-preset-option{
  opacity:1!important;
  transform:none!important;
  pointer-events:auto!important;
  transition:background-color .18s ease,color .18s ease,box-shadow .18s ease!important;
}
html[data-qwix-tone="light"] body #page-text-presets #textEditPresetPicker .text-edit-picker-handle > span,
html[data-aptk-mode="suede"] body #page-text-presets #textEditPresetPicker .text-edit-picker-handle > span{
  background:linear-gradient(180deg,rgba(76,58,37,.28),rgba(76,58,37,.12))!important;
}

/* Text Edit uses the same rise, fade and small overshoot as a main page. */
@keyframes qwix-text-edit-enter{
  0%{opacity:0;transform:translate3d(0,14px,0) scale(.994)}
  72%{opacity:1;transform:translate3d(0,-.6px,0) scale(1.0005)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
html.qwix-motion-enabled body #page-text-presets .qwix-text-edit-enter-item{
  animation:qwix-text-edit-enter var(--qwix-motion-page) var(--qwix-motion-out) both!important;
  animation-delay:calc(var(--qwix-text-edit-order,0) * var(--qwix-motion-stagger))!important;
}

/* v9: Text Edit is intentionally tied to the one canonical page entrance.
   Keeping the animation-name shared prevents later tuning of page motion from
   making preset switches feel different again. */
html.qwix-motion-enabled body #page-text-presets .qwix-text-edit-enter-item{
  animation-name:qwix-text-edit-block-enter!important;
  animation-duration:320ms!important;
  animation-timing-function:cubic-bezier(.2,.72,.22,1)!important;
  animation-delay:calc(var(--qwix-text-edit-order,0) * 36ms)!important;
}
@keyframes qwix-text-edit-block-enter{
  0%{opacity:0;transform:translate3d(0,9px,0)}
  100%{opacity:1;transform:translate3d(0,0,0)}
}

/* ===== Final micro-stability pass: Graph / Tools / Text (2026-07-16) =====
   These overrides remove compositor-only one-frame snaps without changing
   layout, sizing or the existing entrance timing. */

/* Graph: keep the values row on a stable compositing plane after its page
   entrance and center all three labels with flex rather than font baselines.
   This prevents the Read/readout/Save glyphs from moving by one device pixel
   when the page-reveal transform is released. */
html body #v120App #v120Content #page-graph-editor .graph-values-row{
  transform:translate3d(0,0,0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
html body #v120App #v120Content #page-graph-editor #readGraphBtn,
html body #v120App #v120Content #page-graph-editor #graphValuesBtn,
html body #v120App #v120Content #page-graph-editor #saveGraphBtn{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding-top:0!important;
  padding-bottom:0!important;
  line-height:1!important;
  text-align:center!important;
}
html body #v120App #v120Content #page-graph-editor #graphReadout{
  display:block!important;
  line-height:1!important;
  padding:0!important;
  margin:0!important;
}

/* Tools: the universal page reveal contains a tiny scale overshoot. On the
   lower row of square tools that reads as a brief stretch followed by a
   "squash". Preserve the same rise, opacity and bounce, but never scale these
   square cards. */
@keyframes qwix-tools-square-row-reveal{
  0%{opacity:0;transform:translate3d(0,14px,0)}
  72%{opacity:1;transform:translate3d(0,-.6px,0)}
  100%{opacity:1;transform:translate3d(0,0,0)}
}
html.qwix-motion-enabled body #v120Content > #page-toolkit.qwix-page-entering .tools-bottom-buttons-row-v146.qwix-page-reveal-item{
  animation:qwix-tools-square-row-reveal var(--qwix-motion-page) var(--qwix-motion-out) both!important;
  animation-delay:calc(var(--qwix-reveal-order,0) * var(--qwix-motion-stagger))!important;
}
html body #v120App #v120Content #page-toolkit .tools-bottom-buttons-row-v146{
  transform:translate3d(0,0,0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

/* Text Apply: remove the delayed accent halo. Keep a stable raised shadow so
   the button looks the same before, during and after page/preset reveals. */
html body #v120App #v120Content #page-text-presets #applySelectedPresetBtn{
  transform:translate3d(0,0,0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.08),
    0 5px 12px -9px rgba(0,0,0,.44)!important;
  transition-property:transform,background-color,border-color,color!important;
}
html body #v120App #v120Content #page-text-presets #applySelectedPresetBtn:hover,
html body #v120App #v120Content #page-text-presets #applySelectedPresetBtn:focus-visible{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.09),
    0 6px 14px -10px rgba(0,0,0,.48)!important;
}
/* Keep compact graph buttons composited at rest. Hover/press rules still take
   over while the pointer is interacting with the button. */
html body #v120App #v120Content #page-graph-editor #readGraphBtn:not(:hover):not(:active),
html body #v120App #v120Content #page-graph-editor #graphValuesBtn:not(:hover):not(:active),
html body #v120App #v120Content #page-graph-editor #saveGraphBtn:not(:hover):not(:active){
  transform:translate3d(0,0,0)!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
}

/* Text Edit keeps its proven prepared -> enter hand-off; only the motion
   amplitude is strengthened to match normal preset and main-page movement. */
@keyframes qwix-text-edit-enter-strong{
  0%{opacity:0;transform:translate3d(0,16px,0) scale(.993);}
  70%{opacity:1;transform:translate3d(0,-.9px,0) scale(1.0007);}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1);}
}
html.qwix-motion-enabled body #page-text-presets .qwix-text-edit-enter-item{
  animation-name:qwix-text-edit-enter-strong!important;
}

/* 2026-07-18: Text internal switches — double travel/settle strength while
   retaining an exact scale(1)/position(0) resting frame. */
@keyframes qwix-text-edit-enter-strong{
  0%{opacity:0;transform:translate3d(0,32px,0) scale(.986);}
  70%{opacity:1;transform:translate3d(0,-2px,0) scale(1.0014);}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1);}
}
html.qwix-motion-enabled body #page-text-presets .qwix-text-edit-enter-prepared{
  opacity:0 !important;
  transform:translate3d(0,32px,0) scale(.986) !important;
}
html.qwix-motion-enabled body #page-text-presets .qwix-text-edit-enter-item{
  backface-visibility:hidden !important;
  -webkit-backface-visibility:hidden !important;
}
@keyframes qwix-text-edit-leave{
  0%{opacity:1;transform:translate3d(0,0,0) scale(1)}
  100%{opacity:0;transform:translate3d(0,-8px,0) scale(.996)}
}


/* ===== 2026-07-29 Text Edit hydration + deterministic control reveal =====
   Edit builds the final slider/Graph layout while hidden, then owns one reveal.
   The compact Graph must not run its independent height transition during that
   hydration frame or it shifts after the preview has already landed. */
html body #page-text-presets.text-edit-hydrating #textGraphDrawer,
html body #page-text-presets.text-edit-hydrating #textGraphDrawer > .text-graph-drawer-inner,
html body #page-text-presets.text-edit-hydrating #textGraphHoverBar{
  transition:none!important;
}
html body #page-text-presets.text-edit-motion-running #textGraphDrawer:not(.is-dropdown-open):not(.is-closing){
  transition:none!important;
}
/* Preview and compact Graph bar share the same Edit entrance order. The drawer
   itself is allowed to take the canonical Edit keyframe now that its resting
   opacity/transform are not forced with !important in qwix-core.css. */
html.qwix-motion-enabled body #page-text-presets #textGraphDrawer.qwix-text-edit-enter-prepared{
  opacity:0!important;
  transform:translate3d(0,32px,0)!important;
}
html.qwix-motion-enabled body #page-text-presets #textGraphDrawer.qwix-text-edit-enter-item{
  animation-name:qwix-text-edit-enter-strong!important;
  animation-duration:430ms!important;
  animation-timing-function:cubic-bezier(.16,.86,.22,1)!important;
  animation-fill-mode:both!important;
}
/* Edit slider internals animate one ROW at a time in final visual top-to-bottom
   order. No child label/thumb owns a competing stagger, so presets cannot reveal
   controls out of sequence. */
html.qwix-motion-enabled body #page-text-presets.text-edit-active .smart-control-row.qwix-text-control-piece.qwix-text-control-piece-item,
html.qwix-motion-enabled body #page-text-presets.text-edit-active .custom-ffx-row.qwix-text-control-piece.qwix-text-control-piece-item{
  animation-name:qwix-text-control-piece-enter!important;
  animation-duration:430ms!important;
  animation-timing-function:cubic-bezier(.16,.86,.22,1)!important;
  animation-delay:calc(var(--qwix-text-control-order,0) * 24ms)!important;
  animation-fill-mode:both!important;
}
html.qwix-motion-enabled body #page-text-presets.text-edit-active .smart-control-row.qwix-text-control-piece.qwix-text-control-piece-prepared,
html.qwix-motion-enabled body #page-text-presets.text-edit-active .custom-ffx-row.qwix-text-control-piece.qwix-text-control-piece-prepared{
  opacity:0!important;
  transform:translate3d(0,14px,0)!important;
}