/* Nighty Design (/tools/ui-designer): the shell's look. Floating rounded panels over
   a full-window canvas, a floating tool bar at the bottom center, a minimizable interface) in the site's dark glass
   (site.css tokens: --glass-1/2, --glass-border, --glass-blur, the pink --accent, Manrope for the interface, Sora for
   headings, mono for numbers, --ease-out / --fast motion). Dense like a pro tool: rows and controls about 28 px high
   on a computer, bigger on touch. The canvas is the star: the glass around it is calm and quiet.

   Contents
     1. The page and the root tokens (--dz-*)
     2. Boot and fatal screens
     3. Shared primitives every part uses (dz-btn, dz-input, dz-number, dz-switch, dz-seg, dz-field, dz-section,
        dz-list, dz-card, dz-tabs, dz-code, dz-badge, dz-progress, dz-empty, dz-kbd, dz-scroll) and focus rings
     4. The window: the canvas, floating panels, chips, the top-right group, the tool bar, banners, device strip
     5. Things that open above: popovers, menus, sheets, dialogs, toasts, tooltips, the command palette
     6. Panel contents: layers, pages, assets, properties, pickers
     7. The projects screen, privacy and about
     8. Tablets and phones, coarse pointers, reduced motion
     9. Frames on the canvas: the empty canvas's start card, the Frame tool's sizes, the Roblox screen switch
     10. Help and the tour: the ? button, Help & questions, the first-run question, the spotlight and its card */

/* ============================================================================================================
   1. The page and the root tokens
   ============================================================================================================ */

/* The cursor, a choice only in Nighty Design (the rest of the website keeps the device's own: site.css "cursor"):
   the device's own cursor (the default), the NightyCode arrow and pointing hand (/assets/img/cursor-arrow.svg,
   cursor-hand.svg), or a picture of the visitor's, as picked in Preferences > Cursor (/assets/js/cursor.js):
   cursor-boot.js sets html[data-cursor] before the page paints, and "Your own" puts the chosen picture in --nc-own.
   Only the plain arrow and the hand change (the rules that use --nc-page, --nc-arrow and --nc-hand); every tool's
   own cursor stays. */
:root {
  --nc-page: auto;
  --nc-arrow: default;
  --nc-hand: pointer;
}

:root[data-cursor="nc"] {
  --nc-page: url("/assets/img/cursor-arrow.svg") 4 3, auto;
  --nc-arrow: url("/assets/img/cursor-arrow.svg") 4 3, default;
  --nc-hand: url("/assets/img/cursor-hand.svg") 12 3, pointer;
}

:root[data-cursor="own"] {
  --nc-page: var(--nc-own), auto;
  --nc-arrow: var(--nc-own), default;
  --nc-hand: var(--nc-own), pointer;
}

/* Canvas colors (README "Canvas colors"): the engine reads these from the document root after 'ready', so the
   canvas and the panels match. Clear on light and dark designs alike. */
:root {
  --dz-selection: #4ea8ff; /* selection outlines and handles */
  --dz-hover: #4ea8ff; /* the outline of what the pointer is over */
  --dz-guide: #ff5ca8; /* smart guides, snapping lines */
  --dz-measure: #ff5ca8; /* distance labels */
  --dz-component: #b98cff; /* components and instances */
  --dz-canvas: #121016; /* the area around the pages */
}

/* Themes, only in Nighty Design (Preferences > Theme: ui/theme-prefs.js; the setting is ui/lib/theme.js, and
   cursor-boot.js sets html[data-dz-theme] before the page paints). NightyCode, the website's look, is no attribute:
   every color in these styles is either one of the site's tokens or a theme value with the NightyCode color as its
   fallback, e.g. rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.06). A theme sets the site's tokens (--text, --accent ...)
   and the --dzt-* values; Dark and Light are the blocks below, Custom puts the same values on the root element
   (worked out from a few picked colors by ui/lib/theme.js). The canvas keeps its colors in every theme: the
   selection blue, guides, and each page's own background.
     --dzt-fg-rgb       see-through tints over panels: hovers, fields, lines, tracks, scrollbars ("r, g, b")
     --dzt-accent-rgb   the accent's tints: selections, focus rings, marks
     --dzt-glow         how much the accent glows (colored shadows, soft lights): 1 in NightyCode, 0 for none
     --dzt-violet-rgb, --dzt-cyan-rgb, --dzt-danger-rgb   components and variables, Roblox screens, deleting
     --dzt-scrim-rgb    what dims the window behind dialogs; --dzt-well-rgb small wells (rename fields, code)
     --dzt-bar-rgb, --dzt-bar-hover-rgb, --dzt-on-bar   the small bars that float on the canvas
     --dzt-solid-rgb    the solid panel color as "r, g, b" (fades to it)
     --dzt-on-accent    letters and marks on accent fills; --dzt-selection-ink text in a selection
     --dzt-surface ... --dzt-checker   the shell's --dz-* tokens of the same names */
:root[data-dz-theme] {
  color-scheme: var(--dzt-scheme, dark);
}

:root[data-dz-theme] .designer {
  --dz-surface: var(--dzt-surface);
  --dz-surface-strong: var(--dzt-surface-strong);
  --dz-surface-solid: var(--dzt-surface-solid);
  --dz-line: var(--dzt-line);
  --dz-line-strong: var(--dzt-line-strong);
  --dz-field: var(--dzt-field);
  --dz-field-hover: var(--dzt-field-hover);
  --dz-field-focus: var(--dzt-field-focus);
  --dz-hover-bg: var(--dzt-hover-bg);
  --dz-press: var(--dzt-press);
  --dz-accent-fill: var(--dzt-accent-fill);
  --dz-dim: var(--dzt-dim);
  --dz-danger: var(--dzt-danger);
  --dz-danger-ink: var(--dzt-danger-ink);
  --dz-ring: var(--dzt-ring);
  --dz-shadow-pop: var(--dzt-shadow-pop);
  --dz-shadow-card: var(--dzt-shadow-card);
  --dz-shadow-float: var(--dzt-shadow-float);
  --dz-blur: var(--dzt-blur);
  --dz-checker: var(--dzt-checker);
}

/* Phones have no blur: the panels are the stronger, almost solid surface. */
:root[data-dz-theme] .designer[data-layout="phone"] {
  --dz-surface: var(--dzt-surface-strong);
  --dz-blur: none;
}

/* The NightyCode logo is drawn for dark backgrounds: on light panels it sits on a dark tile of its own. */
:root[data-dz-theme] :is(.dz-menu-button img, .dz-projects-brand img, .designer-boot img, .dz-about-head img, .dz-tour-ask-logo) {
  background: var(--dzt-logo-tile, transparent);
}

/* Dark: calm neutral greys, a blue accent, nothing glows. */
:root[data-dz-theme="dark"] {
  --bg: #1e1e1e;
  --bg-elevated: #232323;
  --surface-1: #2c2c2c;
  --surface-2: #303030;
  --surface-3: #383838;
  --border: #3d3d3d;
  --border-strong: #4a4a4a;
  --border-hover: #5a5a5a;
  --glass-1: rgba(44, 44, 44, 0.9);
  --glass-2: rgba(50, 50, 50, 0.94);
  --glass-border: rgba(255, 255, 255, 0.09);
  --glass-border-hover: rgba(255, 255, 255, 0.16);
  --text: #f0f0f0;
  --text-2: #c4c4c4;
  --text-3: #b3b3b3;
  --accent: #8cb9ff;
  --accent-ink: #8cb9ff;
  --accent-strong: #1f6ae0;
  --accent-deep: #1a5ec4;
  --accent-soft: rgba(61, 139, 255, 0.14);
  --accent-line: rgba(61, 139, 255, 0.42);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 24px 48px -28px rgba(0, 0, 0, 0.8);
  --shadow-lg: 0 40px 80px -36px rgba(0, 0, 0, 0.85);
  --dzt-scheme: dark;
  --dzt-fg-rgb: 255, 255, 255;
  --dzt-accent-rgb: 61, 139, 255;
  --dzt-glow: 0;
  --dzt-scrim-rgb: 0, 0, 0;
  --dzt-well-rgb: 24, 24, 24;
  --dzt-bar-rgb: 44, 44, 44;
  --dzt-bar-hover-rgb: 62, 62, 62;
  --dzt-solid-rgb: 44, 44, 44;
  --dzt-on-accent: #ffffff;
  --dzt-on-bar: #f0f0f0;
  --dzt-selection-ink: #ffffff;
  --dzt-checker-a: #3a3a3a;
  --dzt-checker-b: #4a4a4a;
  --dzt-surface: rgba(44, 44, 44, 0.96);
  --dzt-surface-strong: rgba(48, 48, 48, 0.98);
  --dzt-surface-solid: #2c2c2c;
  --dzt-line: rgba(255, 255, 255, 0.08);
  --dzt-line-strong: rgba(255, 255, 255, 0.13);
  --dzt-field: rgba(255, 255, 255, 0.05);
  --dzt-field-hover: rgba(255, 255, 255, 0.08);
  --dzt-field-focus: rgba(255, 255, 255, 0.06);
  --dzt-hover-bg: rgba(255, 255, 255, 0.07);
  --dzt-press: rgba(255, 255, 255, 0.11);
  --dzt-accent-fill: linear-gradient(135deg, #2370e6, #1f6ae0 50%, #1a5ec4);
  --dzt-dim: rgba(0, 0, 0, 0.5);
  --dzt-danger: #ff5c7a;
  --dzt-danger-ink: #ff9db0;
  --dzt-ring: 0 0 0 2px rgba(61, 139, 255, 0.6);
  --dzt-shadow-pop: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 20px 48px -16px rgba(0, 0, 0, 0.7), 0 6px 18px -10px rgba(0, 0, 0, 0.6);
  --dzt-shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 12px 32px -22px rgba(0, 0, 0, 0.8);
  --dzt-shadow-float: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 16px 40px -20px rgba(0, 0, 0, 0.7), 0 4px 12px -8px rgba(0, 0, 0, 0.5);
  --dzt-blur: blur(12px) saturate(120%);
  --dzt-checker: repeating-conic-gradient(#4a4a4a 0% 25%, #3a3a3a 0% 50%) 0 0 / 8px 8px;
}

/* Light: white panels on a soft grey, dark text, a blue accent, light shadows. */
:root[data-dz-theme="light"] {
  --bg: #f3f3f5;
  --bg-elevated: #ffffff;
  --surface-1: #ffffff;
  --surface-2: #f6f6f8;
  --surface-3: #ececf0;
  --border: #e1e1e7;
  --border-strong: #d2d2da;
  --border-hover: #b6b6c2;
  --glass-1: rgba(255, 255, 255, 0.9);
  --glass-2: rgba(255, 255, 255, 0.95);
  --glass-border: rgba(24, 24, 32, 0.1);
  --glass-border-hover: rgba(24, 24, 32, 0.2);
  --text: #1b1a1f;
  --text-2: #46444f;
  --text-3: #5c5968;
  --accent: #155fcc;
  --accent-ink: #155fcc;
  --accent-strong: #1a66d6;
  --accent-deep: #155bc4;
  --accent-soft: rgba(26, 115, 232, 0.1);
  --accent-line: rgba(26, 115, 232, 0.38);
  --cyan: #00788e;
  --violet: #7c4ddb;
  --ok: #046c48;
  --ok-soft: rgba(4, 108, 72, 0.1);
  --ok-line: rgba(4, 108, 72, 0.3);
  --warn: #855400;
  --warn-soft: rgba(133, 84, 0, 0.1);
  --warn-line: rgba(133, 84, 0, 0.3);
  --info: #0b6bcb;
  --info-soft: rgba(11, 107, 203, 0.1);
  --info-line: rgba(11, 107, 203, 0.3);
  --shadow-sm: 0 1px 2px rgba(20, 20, 40, 0.08);
  --shadow-md: 0 14px 32px -20px rgba(20, 20, 40, 0.28);
  --shadow-lg: 0 24px 56px -28px rgba(20, 20, 40, 0.32);
  --dzt-scheme: light;
  --dzt-fg-rgb: 24, 24, 32;
  --dzt-accent-rgb: 26, 115, 232;
  --dzt-glow: 0;
  --dzt-violet-rgb: 124, 77, 219;
  --dzt-cyan-rgb: 0, 120, 142;
  --dzt-danger-rgb: 217, 45, 74;
  --dzt-scrim-rgb: 20, 20, 28;
  --dzt-well-rgb: 246, 246, 248;
  --dzt-bar-rgb: 255, 255, 255;
  --dzt-bar-hover-rgb: 236, 236, 240;
  --dzt-solid-rgb: 255, 255, 255;
  --dzt-on-accent: #ffffff;
  --dzt-on-bar: #1b1a1f;
  --dzt-selection-ink: #1b1a1f;
  --dzt-danger-hover-ink: #99142e;
  --dzt-violet-ink: #6a3fc9;
  --dzt-layer-frame: #bf5f0c;
  --dzt-layer-text: #2b68d0;
  --dzt-layer-image: #1a8547;
  --dzt-code-string: #1a7f37;
  --dzt-code-number: #a35200;
  --dzt-measure-ink: #c2246a;
  --dzt-code-keyword: #c2246a;
  --dzt-code-tag: #0b62c4;
  --dzt-code-attr: #7a3fc9;
  --dzt-code-property: #0a6aa8;
  --dzt-code-selector: #8a5a00;
  --dzt-code-type: #0b7a8a;
  --dzt-checker-a: #ececf0;
  --dzt-checker-b: #d9d9e0;
  --dzt-logo-tile: #14111c;
  --dzt-surface: rgba(255, 255, 255, 0.97);
  --dzt-surface-strong: rgba(255, 255, 255, 0.99);
  --dzt-surface-solid: #ffffff;
  --dzt-line: rgba(24, 24, 32, 0.1);
  --dzt-line-strong: rgba(24, 24, 32, 0.16);
  --dzt-field: rgba(24, 24, 32, 0.045);
  --dzt-field-hover: rgba(24, 24, 32, 0.07);
  --dzt-field-focus: rgba(24, 24, 32, 0.03);
  --dzt-hover-bg: rgba(24, 24, 32, 0.05);
  --dzt-press: rgba(24, 24, 32, 0.09);
  --dzt-accent-fill: linear-gradient(135deg, #1f6fe0, #1a66d6 50%, #155bc4);
  --dzt-dim: rgba(20, 20, 28, 0.32);
  --dzt-danger: #d92d4a;
  --dzt-danger-ink: #bf1f3c;
  --dzt-ring: 0 0 0 2px rgba(26, 115, 232, 0.55);
  --dzt-shadow-pop: 0 0 0 1px rgba(24, 24, 32, 0.08), 0 16px 40px -12px rgba(20, 20, 40, 0.22), 0 4px 12px -6px rgba(20, 20, 40, 0.12);
  --dzt-shadow-card: 0 1px 2px rgba(20, 20, 40, 0.06), 0 10px 28px -20px rgba(20, 20, 40, 0.25);
  --dzt-shadow-float: 0 0 0 1px rgba(24, 24, 32, 0.08), 0 12px 32px -16px rgba(20, 20, 40, 0.2), 0 2px 8px -4px rgba(20, 20, 40, 0.1);
  --dzt-blur: blur(16px) saturate(140%);
  --dzt-checker: repeating-conic-gradient(#d9d9e0 0% 25%, #ececf0 0% 50%) 0 0 / 8px 8px;
}

html,
body.app-page {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--bg);
}

/* The site's film grain would sit on top of the canvas and change its colors: not in the editor. */
body.app-page::after,
body.app-page::before {
  display: none;
}

.app-main {
  height: 100%;
}

.designer {
  /* Sizes */
  --dz-left-w: var(--dz-left-user-w, 256px);
  --dz-right-w: var(--dz-right-user-w, 280px);
  --dz-edge: 10px; /* space between the floating glass and the window's edges */
  /* Notches, rounded corners and home bars (the page has viewport-fit=cover), and the on-screen keyboard's height
     (set from visualViewport by ui/index.js). */
  --dz-safe-top: env(safe-area-inset-top, 0px);
  --dz-safe-right: env(safe-area-inset-right, 0px);
  --dz-safe-bottom: env(safe-area-inset-bottom, 0px);
  --dz-safe-left: env(safe-area-inset-left, 0px);
  --dz-keyboard: 0px;
  --dz-r-panel: 16px;
  --dz-h: 28px;
  --dz-h-sm: 24px;
  --dz-row-h: 28px;
  --dz-indent: 14px;
  --dz-pad: 12px;
  --dz-target: 28px;
  --dz-r: 8px;
  --dz-r-sm: 6px;
  --dz-r-lg: 14px;
  --dz-fs: 12px;
  --dz-fs-sm: 11px;
  /* Surfaces */
  --dz-surface: rgba(18, 15, 26, 0.74);
  --dz-surface-strong: rgba(22, 19, 31, 0.94);
  --dz-surface-solid: #14111c;
  --dz-line: rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.07);
  --dz-line-strong: rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.12);
  --dz-field: rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.045);
  --dz-field-hover: rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.075);
  --dz-field-focus: rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.06);
  --dz-hover-bg: rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.06);
  --dz-press: rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.1);
  --dz-selected: rgba(var(--dzt-accent-rgb, 255, 92, 168), 0.15);
  --dz-selected-hover: rgba(var(--dzt-accent-rgb, 255, 92, 168), 0.2);
  --dz-selected-strong: rgba(var(--dzt-accent-rgb, 255, 92, 168), 0.28);
  --dz-in-selection: rgba(var(--dzt-accent-rgb, 255, 92, 168), 0.06);
  /* Colors, one system (the site's palette): pink for the one main action of an area and for active, selected and
     focused things; the canvas selection blue; cyan only as the small mark of a Roblox screen; violet for components;
     rose only for deleting and errors; ok / warn / info only for status; white and greys for text. */
  --dz-accent-fill: linear-gradient(135deg, #e3368b, var(--accent-strong) 50%, var(--accent-deep));
  --dz-roblox: var(--cyan);
  --dz-roblox-soft: rgba(var(--dzt-cyan-rgb, 92, 225, 245), 0.1);
  --dz-roblox-line: rgba(var(--dzt-cyan-rgb, 92, 225, 245), 0.3);
  --dz-dim: rgba(var(--dzt-scrim-rgb, 5, 4, 8), 0.56);
  --dz-danger: #ff5c7a;
  --dz-danger-ink: #ff9db0;
  --dz-danger-soft: rgba(var(--dzt-danger-rgb, 255, 92, 122), 0.12);
  --dz-danger-line: rgba(var(--dzt-danger-rgb, 255, 92, 122), 0.4);
  --dz-ring: 0 0 0 2px rgba(var(--dzt-accent-rgb, 255, 92, 168), 0.6);
  --dz-shadow-pop: 0 0 0 1px rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.06), 0 28px 64px -20px rgba(0, 0, 0, 0.88), 0 10px 26px -14px rgba(0, 0, 0, 0.7);
  --dz-shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 18px 40px -26px rgba(0, 0, 0, 0.9);
  --dz-shadow-float: 0 0 0 1px rgba(0, 0, 0, 0.28), 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 20px 48px -22px rgba(0, 0, 0, 0.88), 0 4px 14px -8px rgba(0, 0, 0, 0.55);
  --dz-blur: blur(18px) saturate(150%);
  --dz-checker: repeating-conic-gradient(#2b2637 0% 25%, #1b1724 0% 50%) 0 0 / 8px 8px;
  --dz-ease: var(--ease-out);
  --dz-fast: var(--fast);

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh; /* older browsers */
  height: 100dvh; /* follows the browser's own bars as they slide in and out */
  overflow: hidden;
  touch-action: manipulation; /* no double-tap zoom on the interface (the canvas handles its own gestures) */
  color: var(--text);
  font: 500 var(--dz-fs) / 1.4 var(--font-body);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  background: var(--dz-canvas);
}

.designer *,
.designer *::before,
.designer *::after {
  box-sizing: border-box;
}

.designer :where(button, input, select, textarea) {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

.designer :where(h1, h2, h3, h4, p, ul, ol, dl, dd) {
  margin: 0;
}

.designer :where(ul, ol) {
  padding: 0;
}

.designer ::selection {
  background: rgba(var(--dzt-accent-rgb, 255, 92, 168), 0.35);
  color: var(--dzt-selection-ink, #fff);
}

.designer [hidden] {
  display: none !important;
}

.dz-offscreen {
  position: fixed !important;
  left: -9999px !important;
  top: 0 !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
}

/* Icons: 1.5 px strokes at 16 and 20 px. */
.dz-icon {
  flex: none;
  display: block;
  width: 16px;
  height: 16px;
  pointer-events: none;
}

.dz-icon.is-20 {
  width: 20px;
  height: 20px;
}

.dz-icon :where(path, circle, rect, line, polyline, polygon) {
  vector-effect: non-scaling-stroke;
}

/* While scrubbing a number field, the whole window shows the resize cursor and text is not selected. */
html.dz-scrubbing,
html.dz-scrubbing * {
  cursor: ew-resize !important;
  user-select: none !important;
}

.designer.is-resizing,
.designer.is-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}

/* ============================================================================================================
   2. Boot and fatal screens
   ============================================================================================================ */

.designer-boot {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  margin: 0;
  color: var(--text-2);
  font: 600 13px/1.4 var(--font-body);
  background:
    radial-gradient(40vw 40vh at 50% 45%, rgba(var(--dzt-accent-rgb, 255, 92, 168), calc(0.09 * var(--dzt-glow, 1))), transparent 70%),
    var(--bg);
  transition: opacity 360ms var(--ease-out), visibility 360ms;
}

.designer-boot img {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.08), 0 18px 48px -12px rgba(var(--dzt-accent-rgb, 255, 92, 168), calc(0.45 * var(--dzt-glow, 1)));
}

.designer-boot p {
  position: relative;
  padding-top: 14px;
}

/* A thin light that runs under the text while the editor opens. */
.designer-boot p::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 120px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--cyan), transparent);
  background-size: 200% 100%;
  transform: translateX(-50%);
  opacity: 0.8;
}

@media (prefers-reduced-motion: no-preference) {
  .designer-boot img {
    animation: dz-boot-glow 1.8s var(--ease-in-out) infinite alternate;
  }

  .designer-boot p::before {
    animation: dz-boot-run 1.4s linear infinite;
  }
}

@keyframes dz-boot-glow {
  from {
    box-shadow: 0 0 0 1px rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.08), 0 18px 48px -18px rgba(var(--dzt-accent-rgb, 255, 92, 168), calc(0.3 * var(--dzt-glow, 1)));
  }
  to {
    box-shadow: 0 0 0 1px rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.12), 0 18px 56px -8px rgba(var(--dzt-accent-rgb, 255, 92, 168), calc(0.6 * var(--dzt-glow, 1)));
  }
}

@keyframes dz-boot-run {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -100% 0;
  }
}

.designer-boot.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.designer-fatal {
  position: relative;
  z-index: 95;
  max-width: 600px;
  margin: 12vh auto 0;
  padding: 32px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: var(--glass-1);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-md);
  font-size: 15px;
  line-height: 1.6;
}

.designer-fatal h1 {
  margin-bottom: 10px;
  font: 600 1.4rem/1.2 var(--font-display);
}

.designer-fatal p {
  color: var(--text-2);
}

.designer-fatal pre {
  max-height: 40vh;
  overflow: auto;
  margin-top: 16px;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.35);
  white-space: pre-wrap;
  color: var(--text-3);
  font: 12px/1.5 var(--font-mono);
}

/* ============================================================================================================
   3. Shared primitives (README "Look and shared primitives")
   ============================================================================================================ */

/* Focus: a crisp pink ring, only for the keyboard. */
.designer :focus {
  outline: none;
}

.designer :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-radius: var(--dz-r-sm);
}

.designer :is(.dz-input, .dz-select, .dz-textarea, .dz-number):focus-visible,
.designer .dz-number:focus-within {
  outline: none;
}

/* Scroll areas F6 lands on: the ring sits inside (the panel would clip it outside). */
.designer :is(.dz-panel-scroll, .dz-assets, .dz-layers-tree):focus-visible {
  outline-offset: -2px;
}

/* ---------- buttons ---------- */
.dz-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: var(--dz-h);
  height: var(--dz-h);
  padding: 0 11px;
  border: 1px solid var(--dz-line-strong);
  border-radius: var(--dz-r);
  background: linear-gradient(180deg, rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.07), rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.035));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
  color: var(--text);
  font-weight: 650;
  font-size: var(--dz-fs);
  line-height: 1;
  white-space: nowrap;
  cursor: var(--nc-hand, pointer);
  user-select: none;
  transition: background-color var(--dz-fast) var(--dz-ease), border-color var(--dz-fast) var(--dz-ease), color var(--dz-fast) var(--dz-ease), box-shadow var(--dz-fast) var(--dz-ease), transform 120ms var(--dz-ease);
}

.dz-btn:hover {
  border-color: var(--glass-border-hover);
  background: linear-gradient(180deg, rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.1), rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.055));
}

.dz-btn:active {
  transform: translateY(0.5px) scale(0.985);
}

.dz-btn:disabled,
.dz-btn[aria-disabled="true"] {
  opacity: 0.42;
  cursor: var(--nc-arrow, default);
  pointer-events: none;
}

.dz-btn.is-primary {
  border-color: transparent;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 55%),
    var(--dz-accent-fill);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 8px 20px -10px rgba(var(--dzt-accent-rgb, 255, 92, 168), calc(0.75 * var(--dzt-glow, 1)));
  color: var(--dzt-on-accent, #fff);
}

.dz-btn.is-primary:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.04) 55%),
    var(--dz-accent-fill);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16) inset, 0 1px 0 rgba(255, 255, 255, 0.26) inset, 0 10px 26px -10px rgba(var(--dzt-accent-rgb, 255, 92, 168), calc(0.9 * var(--dzt-glow, 1)));
}

.dz-btn.is-ghost {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--text-2);
}

.dz-btn.is-ghost:hover {
  background: var(--dz-hover-bg);
  color: var(--text);
}

.dz-btn.is-ghost:active {
  background: var(--dz-press);
}

.dz-btn.is-danger {
  border-color: var(--dz-danger-line);
  background: var(--dz-danger-soft);
  color: var(--dz-danger-ink);
}

.dz-btn.is-danger:hover {
  border-color: rgba(var(--dzt-danger-rgb, 255, 92, 122), 0.7);
  background: rgba(var(--dzt-danger-rgb, 255, 92, 122), 0.2);
  color: var(--dzt-danger-hover-ink, #ffd0d9); /* the danger ink, lighter on hover */
}

.dz-btn.is-primary.is-danger {
  border-color: transparent;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 55%), linear-gradient(135deg, #f0466a, #c72a4d);
  color: #fff;
}

.dz-btn.is-small {
  height: var(--dz-h-sm);
  min-width: var(--dz-h-sm);
  padding: 0 8px;
  border-radius: var(--dz-r-sm);
  font-size: var(--dz-fs-sm);
}

.dz-btn.is-icon {
  width: var(--dz-h);
  padding: 0;
}

.dz-btn.is-icon.is-small {
  width: var(--dz-h-sm);
}

.dz-btn.is-active,
.dz-btn[aria-pressed="true"] {
  border-color: var(--accent-line);
  background: var(--dz-selected);
  color: var(--accent-ink);
}

.dz-btn.is-ghost.is-active,
.dz-btn.is-ghost[aria-pressed="true"] {
  border-color: transparent;
}

.dz-btn .dz-icon {
  margin: 0 -1px;
}

/* ---------- fields ---------- */
.dz-input,
.dz-select,
.dz-textarea {
  width: 100%;
  min-width: 0;
  height: var(--dz-h);
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--dz-r-sm);
  background: var(--dz-field);
  color: var(--text);
  font-size: var(--dz-fs);
  transition: background-color var(--dz-fast) var(--dz-ease), border-color var(--dz-fast) var(--dz-ease), box-shadow var(--dz-fast) var(--dz-ease);
}

.dz-input::placeholder,
.dz-textarea::placeholder {
  color: var(--text-3);
  opacity: 1;
}

.dz-input:hover,
.dz-select:hover,
.dz-textarea:hover {
  background: var(--dz-field-hover);
}

.dz-input:focus,
.dz-select:focus-visible,
.dz-textarea:focus {
  border-color: var(--accent-line);
  background: var(--dz-field-focus);
  box-shadow: 0 0 0 3px rgba(var(--dzt-accent-rgb, 255, 92, 168), 0.12);
}

.dz-input[aria-invalid="true"],
.dz-textarea[aria-invalid="true"] {
  border-color: rgba(var(--dzt-danger-rgb, 255, 92, 122), 0.6);
}

.dz-input:disabled,
.dz-select:disabled,
.dz-textarea:disabled {
  opacity: 0.45;
}

.dz-input[type="search"]::-webkit-search-cancel-button {
  filter: invert(0.75);
  cursor: var(--nc-hand, pointer);
}

.dz-textarea {
  height: auto;
  min-height: calc(var(--dz-h) * 2);
  padding: 6px 8px;
  line-height: 1.45;
  resize: vertical;
}

.dz-select {
  padding-right: 24px;
  appearance: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none' stroke='%23bdb7cc' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 5px center;
  background-size: 14px 14px;
  text-overflow: ellipsis;
  cursor: var(--nc-hand, pointer);
}

.dz-select option {
  background: var(--dz-surface-solid);
  color: var(--text);
}

/* Number field: a label you can drag (scrub), the number in mono, an optional unit. */
.dz-number {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  height: var(--dz-h);
  border: 1px solid transparent;
  border-radius: var(--dz-r-sm);
  background: var(--dz-field);
  transition: background-color var(--dz-fast) var(--dz-ease), border-color var(--dz-fast) var(--dz-ease), box-shadow var(--dz-fast) var(--dz-ease);
}

.dz-number:hover {
  background: var(--dz-field-hover);
}

.dz-number:focus-within {
  border-color: var(--accent-line);
  background: var(--dz-field-focus);
  box-shadow: 0 0 0 3px rgba(var(--dzt-accent-rgb, 255, 92, 168), 0.12);
}

.dz-number-label {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 100%;
  padding: 0 2px 0 6px;
  color: var(--text-3);
  font: 650 10.5px/1 var(--font-body);
  text-transform: none;
  cursor: ew-resize;
  user-select: none;
  touch-action: none;
}

.dz-number-label:empty {
  min-width: 6px;
  padding: 0;
}

.dz-number:hover .dz-number-label {
  color: var(--text-2);
}

.dz-number-input {
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0 6px 0 4px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: 500 11.5px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
}

.dz-number-input::placeholder {
  color: var(--text-3);
  font-family: var(--font-body);
}

.dz-number-unit {
  flex: none;
  padding-right: 7px;
  color: var(--text-3);
  font: 600 10.5px/1 var(--font-body);
  pointer-events: none;
}

.dz-number.is-disabled {
  opacity: 0.45;
}

.dz-number.is-disabled .dz-number-label {
  cursor: var(--nc-arrow, default);
}

.dz-number.is-zero .dz-number-input {
  color: var(--text-3);
}

.dz-number.is-compact {
  flex: none;
  width: 64px;
}

/* Spinners of native number inputs would fight with scrubbing. */
.dz-number input[type="number"] {
  appearance: textfield;
}

.dz-number input::-webkit-outer-spin-button,
.dz-number input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

/* ---------- toggles: label wraps the input ---------- */
.dz-check,
.dz-switch,
.dz-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--dz-h);
  color: var(--text-2);
  font-size: var(--dz-fs);
  font-weight: 600;
  cursor: var(--nc-hand, pointer);
  user-select: none;
}

.dz-check:hover,
.dz-switch:hover,
.dz-radio:hover {
  color: var(--text);
}

.dz-check input,
.dz-radio input,
.dz-switch input {
  position: relative;
  flex: none;
  margin: 0;
  appearance: none;
  cursor: var(--nc-hand, pointer);
  transition: background-color var(--dz-fast) var(--dz-ease), border-color var(--dz-fast) var(--dz-ease), box-shadow var(--dz-fast) var(--dz-ease);
}

.dz-check input,
.dz-radio input {
  width: 16px;
  height: 16px;
  border: 1px solid var(--dz-line-strong);
  background: var(--dz-field);
}

.dz-check input {
  border-radius: 4px;
}

.dz-radio input {
  border-radius: 50%;
}

.dz-check input:checked,
.dz-check input:indeterminate {
  border-color: transparent;
  background: var(--accent-strong);
}

.dz-check input:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid var(--dzt-on-accent, #fff);
  border-width: 0 1.75px 1.75px 0;
  transform: rotate(45deg);
}

.dz-check input:indeterminate::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  top: 6.5px;
  height: 1.75px;
  border-radius: 1px;
  background: var(--dzt-on-accent, #fff);
}

.dz-radio input:checked {
  border: 5px solid var(--accent-strong);
  background: var(--dzt-on-accent, #fff);
}

.dz-switch input {
  width: 28px;
  height: 16px;
  border-radius: 999px;
  background: rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.14);
}

.dz-switch input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  transition: transform var(--dz-fast) var(--dz-ease);
}

.dz-switch input:checked {
  background: var(--accent-strong);
}

.dz-switch input:checked::after {
  transform: translateX(12px);
}

.dz-switch input:indeterminate {
  background: rgba(var(--dzt-accent-rgb, 255, 92, 168), 0.4);
}

.dz-switch input:indeterminate::after {
  transform: translateX(6px);
}

.dz-check input:focus-visible,
.dz-radio input:focus-visible,
.dz-switch input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.dz-switch.is-bare {
  min-height: var(--dz-h);
}

/* ---------- segmented choice ---------- */
.dz-seg {
  display: inline-flex;
  align-items: stretch;
  min-width: 0;
  height: var(--dz-h);
  padding: 2px;
  gap: 2px;
  border-radius: var(--dz-r-sm);
  background: var(--dz-field);
}

.dz-seg > button {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  padding: 0 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-3);
  font-size: var(--dz-fs-sm);
  font-weight: 650;
  white-space: nowrap;
  cursor: var(--nc-hand, pointer);
  transition: background-color var(--dz-fast) var(--dz-ease), color var(--dz-fast) var(--dz-ease), box-shadow var(--dz-fast) var(--dz-ease);
}

.dz-seg > button > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.dz-seg > button:hover {
  color: var(--text);
  background: var(--dz-hover-bg);
}

.dz-seg > button[aria-pressed="true"] {
  background: rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.12);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 1px 3px rgba(0, 0, 0, 0.35);
  color: var(--text);
}

.dz-seg.is-icons > button {
  padding: 0 6px;
}

/* ---------- labeled rows ---------- */
.dz-field {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.dz-field + .dz-field {
  margin-top: 10px;
}

.dz-label {
  color: var(--text-2);
  font-size: var(--dz-fs-sm);
  font-weight: 650;
}

.dz-hint {
  color: var(--text-3);
  font-size: var(--dz-fs-sm);
  line-height: 1.45;
}

.dz-hint.is-error {
  color: var(--dz-danger-ink);
}

.dz-hint.is-error:empty {
  display: none;
}

.dz-hint.is-warn {
  color: var(--warn);
}

.dz-field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 8px;
}

/* ---------- sections ---------- */
.dz-section {
  border-top: 1px solid var(--dz-line);
}

.dz-section:first-child {
  border-top: 0;
}

.dz-section-head {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  padding: 4px 8px 0 4px;
}

.dz-section-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font: 700 11.5px/1.2 var(--font-body);
  letter-spacing: 0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

h3.dz-section-title {
  padding-left: 8px;
}

.dz-section-toggle {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  height: 28px;
  padding: 0 4px;
  border: 0;
  border-radius: var(--dz-r-sm);
  background: transparent;
  cursor: var(--nc-hand, pointer);
  text-align: left;
}

.dz-section-toggle:hover {
  background: var(--dz-hover-bg);
}

.dz-section-chevron {
  width: 14px;
  height: 14px;
  color: var(--text-3);
  transition: transform var(--dz-fast) var(--dz-ease);
}

.dz-section.is-folded .dz-section-chevron {
  transform: rotate(-90deg);
}

.dz-section-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

.dz-section-body,
.dz-section > :not(.dz-section-head):not(.dz-section-body) {
  display: grid;
  gap: 8px;
  padding: 2px var(--dz-pad) 14px;
}

.dz-section.is-empty .dz-section-body {
  padding-bottom: 6px;
}

.dz-section.is-empty .dz-section-body:not(:has(> :not([hidden]):not(:empty))) {
  display: none;
}

/* ---------- lists ---------- */
.dz-list {
  display: grid;
  gap: 2px;
}

.dz-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: var(--dz-r);
  color: var(--text-2);
  transition: background-color var(--dz-fast) var(--dz-ease), border-color var(--dz-fast) var(--dz-ease);
}

.dz-row:hover {
  background: var(--dz-hover-bg);
  color: var(--text);
}

.dz-row.is-selected {
  border-color: var(--accent-line);
  background: var(--dz-selected);
  color: var(--text);
}

.dz-row.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* ---------- cards ---------- */
.dz-card {
  border: 1px solid var(--glass-border);
  border-radius: var(--dz-r-lg);
  background: var(--glass-1);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--dz-shadow-card);
}

/* ---------- tabs ---------- */
.dz-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.dz-tabs [role="tab"] {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--dz-h);
  padding: 0 10px;
  border: 0;
  border-radius: var(--dz-r-sm);
  background: transparent;
  color: var(--text-3);
  font-size: var(--dz-fs);
  font-weight: 700;
  white-space: nowrap;
  cursor: var(--nc-hand, pointer);
  transition: color var(--dz-fast) var(--dz-ease), background-color var(--dz-fast) var(--dz-ease);
}

.dz-tabs [role="tab"]:hover {
  color: var(--text);
  background: var(--dz-hover-bg);
}

.dz-tabs [role="tab"][aria-selected="true"] {
  color: var(--text);
}

.dz-tabs [role="tab"][aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

/* ---------- code ---------- */
.dz-code {
  position: relative;
  border: 1px solid var(--dz-line);
  border-radius: var(--dz-r);
  background: rgba(var(--dzt-well-rgb, 6, 5, 9), 0.6);
}

.dz-code pre {
  max-height: 320px;
  margin: 0;
  padding: 12px 14px;
  overflow: auto;
  color: var(--text);
  font: 12px/1.55 var(--font-mono);
  white-space: pre;
  tab-size: 2;
}

.dz-code [data-copy] {
  position: absolute;
  top: 6px;
  right: 6px;
}

.dz-code [data-copy].is-done {
  color: var(--ok);
}

/* ---------- small labels ---------- */
.dz-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 18px;
  padding: 0 7px;
  border: 1px solid var(--dz-line-strong);
  border-radius: 999px;
  background: rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.04);
  color: var(--text-2);
  font: 700 10px/1 var(--font-body);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.dz-badge .dz-icon {
  width: 11px;
  height: 11px;
}

.dz-badge.is-ok {
  border-color: var(--ok-line);
  background: var(--ok-soft);
  color: var(--ok);
}

.dz-badge.is-warn {
  border-color: var(--warn-line);
  background: var(--warn-soft);
  color: var(--warn);
}

.dz-badge.is-error {
  border-color: var(--dz-danger-line);
  background: var(--dz-danger-soft);
  color: var(--dz-danger-ink);
}

.dz-badge.is-info {
  border-color: var(--info-line);
  background: var(--info-soft);
  color: var(--info);
}

/* ---------- progress ---------- */
.dz-progress {
  --value: 0;
  position: relative;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.08);
}

.dz-progress::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-strong), var(--accent));
  transform: scaleX(var(--value));
  transform-origin: left;
  transition: transform var(--medium) var(--dz-ease);
}

/* ---------- empty states ---------- */
.dz-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 28px 18px;
  text-align: center;
  color: var(--text-3);
}

.dz-empty > .dz-icon {
  width: 40px;
  height: 40px;
  padding: 9px;
  border: 1px solid var(--dz-line);
  border-radius: 12px;
  background: rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.03);
  color: var(--text-2);
}

.dz-empty h3 {
  color: var(--text);
  font: 650 13px/1.3 var(--font-display);
}

.dz-empty p {
  max-width: 34ch;
  font-size: var(--dz-fs);
  line-height: 1.5;
}

.dz-empty.is-small {
  padding: 14px 12px;
}

.dz-empty.is-small > .dz-icon {
  width: 32px;
  height: 32px;
  padding: 6px;
}

/* ---------- shortcut keys ---------- */
.dz-kbd {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 1px solid var(--dz-line-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.05);
  color: var(--text-2);
  font: 600 10.5px/1 var(--font-mono);
  white-space: nowrap;
}

.dz-kbd + .dz-kbd {
  margin-left: 4px;
}

.dz-kbd.is-wide {
  font-family: var(--font-body);
}

/* ---------- scroll areas ---------- */
.dz-scroll {
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.16) transparent;
}

.dz-scroll::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.dz-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.dz-scroll::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.14) padding-box;
}

.dz-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.26) padding-box;
}

.dz-scroll::-webkit-scrollbar-corner {
  background: transparent;
}

/* ============================================================================================================
   4. The window: a full-window canvas with floating glass over it
   ============================================================================================================ */

.dz-app {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* The canvas fills everything; the engine draws in it. */
.designer-canvas-host {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--dz-canvas);
  touch-action: none;
  outline: none;
}

.designer-canvas-host:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(var(--dzt-accent-rgb, 255, 92, 168), 0.5);
}

.designer-canvas-host.is-drop-target {
  box-shadow: inset 0 0 0 2px rgba(var(--dzt-cyan-rgb, 92, 225, 245), 0.6);
}

/* Everything that floats over the canvas. Only the pieces themselves take the pointer. */
.dz-chrome {
  --dz-left-space: 0px;
  --dz-right-space: 0px;
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.dz-chrome > * {
  pointer-events: auto;
}

.dz-chrome {
  --dz-left-space: var(--dz-safe-left);
  --dz-right-space: var(--dz-safe-right);
}

.designer[data-ui="shown"][data-left="open"] .dz-chrome {
  --dz-left-space: calc(var(--dz-left-w) + var(--dz-edge) + var(--dz-safe-left));
}

.designer[data-ui="shown"][data-right="open"] .dz-chrome {
  --dz-right-space: calc(var(--dz-right-w) + var(--dz-edge) + var(--dz-safe-right));
}

/* Glass: the panels, the tool bar, the chips and the top-right group. */
.dz-panel,
.dz-toolbar,
.dz-viewbar,
.dz-float-chip,
.dz-devices,
.dz-phonebar {
  border: 1px solid var(--glass-border);
  background: var(--dz-surface);
  -webkit-backdrop-filter: var(--dz-blur);
  backdrop-filter: var(--dz-blur);
  box-shadow: var(--dz-shadow-float);
}

/* ---------- the panels ---------- */
.dz-panel {
  position: absolute;
  top: calc(var(--dz-edge) + var(--dz-safe-top));
  bottom: calc(var(--dz-edge) + var(--dz-safe-bottom));
  z-index: 3;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--dz-r-panel);
  transition: opacity 220ms var(--dz-ease), transform 260ms var(--dz-ease), visibility 260ms;
}

.dz-left {
  left: calc(var(--dz-edge) + var(--dz-safe-left));
  width: var(--dz-left-w);
}

.dz-right {
  right: calc(var(--dz-edge) + var(--dz-safe-right));
  width: var(--dz-right-w);
}

.designer[data-left="closed"] .dz-left,
.designer[data-ui="min"] .dz-left {
  visibility: hidden;
  opacity: 0;
  transform: translateX(-12px) scale(0.985);
  pointer-events: none;
}

.designer[data-right="closed"] .dz-right,
.designer[data-ui="min"] .dz-right {
  visibility: hidden;
  opacity: 0;
  transform: translateX(12px) scale(0.985);
  pointer-events: none;
}

/* The left panel's head: main menu, the project's name, minimize; under them the save status and privacy. */
.dz-left-head {
  flex: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 2px;
  padding: 8px 6px 8px 6px;
}

.dz-left-head > .dz-title-status {
  grid-column: 1 / -1;
}

.dz-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.dz-title-name {
  min-width: 0;
  display: flex;
}

.dz-title-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  padding-left: 4px;
}

.dz-menu-button {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 32px;
  padding: 0 4px 0 5px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  cursor: var(--nc-hand, pointer);
  transition: background-color var(--dz-fast) var(--dz-ease);
}

.dz-menu-button img {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  box-shadow: 0 0 0 1px rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.08), 0 6px 16px -8px rgba(var(--dzt-accent-rgb, 255, 92, 168), calc(0.7 * var(--dzt-glow, 1)));
}

.dz-menu-button:hover {
  background: var(--dz-hover-bg);
}

.dz-minimize {
  flex: none;
  color: var(--text-3);
}

/* The project's name: looks like a title, renames on click. */
.dz-project-name {
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  height: 30px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  font: 650 13px/1 var(--font-display);
  letter-spacing: -0.01em;
  text-align: left;
  cursor: text;
  transition: background-color var(--dz-fast) var(--dz-ease), border-color var(--dz-fast) var(--dz-ease);
}

.dz-project-name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dz-project-name:hover {
  border-color: var(--dz-line);
  background: rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.03);
}

.dz-project-name-input {
  width: 100%;
  height: 30px;
  padding: 0 6px;
  border: 1px solid var(--accent-line);
  border-radius: 7px;
  background: var(--dz-field-focus);
  box-shadow: 0 0 0 3px rgba(var(--dzt-accent-rgb, 255, 92, 168), 0.12);
  color: var(--text);
  font: 650 13px/1 var(--font-display);
}

.dz-save {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 7px 0 5px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-3);
  font-size: var(--dz-fs-sm);
  font-weight: 650;
  white-space: nowrap;
  cursor: var(--nc-hand, pointer);
  transition: background-color var(--dz-fast) var(--dz-ease), color var(--dz-fast) var(--dz-ease);
}

.dz-save:hover {
  background: var(--dz-hover-bg);
  color: var(--text-2);
}

.dz-save-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-3);
  box-shadow: 0 0 0 3px rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.04);
}

.dz-save[data-tone="ok"] .dz-save-dot {
  background: var(--ok);
  box-shadow: 0 0 0 3px var(--ok-soft);
}

.dz-save[data-tone="warn"] .dz-save-dot {
  background: var(--warn);
  box-shadow: 0 0 0 3px var(--warn-soft);
}

.dz-save[data-tone="error"] .dz-save-dot {
  background: var(--dz-danger);
  box-shadow: 0 0 0 3px var(--dz-danger-soft);
}

.dz-save[data-tone="error"] {
  color: var(--dz-danger-ink);
}

.dz-save[data-tone="info"] .dz-save-dot {
  background: var(--info);
}

.dz-save[data-tone="busy"] .dz-save-dot {
  background: var(--accent);
}

@media (prefers-reduced-motion: no-preference) {
  .dz-save[data-tone="busy"] .dz-save-dot {
    animation: dz-pulse 1s var(--ease-in-out) infinite alternate;
  }
}

@keyframes dz-pulse {
  from {
    opacity: 0.35;
  }
  to {
    opacity: 1;
  }
}

.dz-save-pop {
  display: grid;
  gap: 6px;
  width: 260px;
  padding: 12px;
}

.dz-save-pop-title {
  font: 650 13px/1.3 var(--font-display);
}

.dz-save-pop-line {
  color: var(--text-2);
  font-size: var(--dz-fs);
}

.dz-save-pop-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

/* "On this device": the privacy badge. */
.dz-privacy {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 8px 0 6px;
  border: 1px solid var(--ok-line);
  border-radius: 999px;
  background: var(--ok-soft);
  color: var(--ok);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: var(--nc-hand, pointer);
  transition: background-color var(--dz-fast) var(--dz-ease), border-color var(--dz-fast) var(--dz-ease);
}

.dz-privacy:hover {
  border-color: rgba(61, 220, 151, 0.5);
  background: rgba(61, 220, 151, 0.16);
}

.dz-privacy .dz-icon {
  width: 12px;
  height: 12px;
}

/* "Install app" (ui/install.js): a small pink pill next to the project's name, an icon in the phone's bar, a button
   on the projects screen. Hidden once the designer is installed. */
.dz-install-btn[hidden] {
  display: none !important;
}

/* Its column in the left panel's head (empty, and next to nothing, once it is hidden). */
.designer .dz-left-head {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
}

.dz-install-btn.is-head {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px 0 7px;
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: var(--nc-hand, pointer);
  transition: background-color var(--dz-fast) var(--dz-ease), border-color var(--dz-fast) var(--dz-ease);
}

.dz-install-btn.is-head:hover {
  border-color: rgba(var(--dzt-accent-rgb, 255, 92, 168), 0.55);
  background: rgba(var(--dzt-accent-rgb, 255, 92, 168), 0.18);
}

.dz-install-btn.is-head .dz-icon {
  width: 12px;
  height: 12px;
}

.dz-icon-btn.dz-install-btn,
.dz-projects-actions .dz-install-btn {
  color: var(--accent-ink);
}

.dz-projects-actions .dz-install-btn {
  border-color: var(--accent-line);
}

/* Phones: the projects screen's buttons two by two, so four of them never squeeze into one row. */
.designer[data-layout="phone"] .dz-projects .dz-projects-actions .dz-btn {
  flex: 1 1 calc(50% - 4px);
  min-width: 0;
}

/* Its popover (a bottom sheet on phones): the app's icon, one line, then one Install button or the browser's steps. */
.dz-install {
  display: grid;
  gap: 12px;
  width: min(300px, calc(100vw - 32px));
  padding: 14px;
}

.dz-sheet .dz-install {
  width: auto;
  padding: 2px 4px 10px;
}

/* The sheet has the title already. */
.dz-sheet .dz-install-title {
  display: none;
}

.dz-install-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dz-install-logo {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  box-shadow: 0 0 0 1px rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.08), 0 8px 20px -10px rgba(var(--dzt-accent-rgb, 255, 92, 168), calc(0.8 * var(--dzt-glow, 1)));
}

.dz-install-title {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 700;
}

.dz-install-sub {
  margin: 2px 0 0;
  color: var(--text-3);
  font-size: var(--dz-fs-sm);
}

.dz-install-action:empty {
  display: none;
}

.dz-install-go {
  width: 100%;
  justify-content: center;
}

.dz-install-steps {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.45;
}

/* The pages: a foldable list under the title. */
.dz-pages {
  flex: none;
  display: grid;
  border-top: 1px solid var(--dz-line);
}

.dz-pages-head {
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: 36px;
  padding: 4px 8px 0 4px;
}

.dz-pages-current {
  min-width: 0;
  margin-left: 6px;
  overflow: hidden;
  color: var(--text-3);
  font-size: var(--dz-fs-sm);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dz-pages:not(.is-folded) .dz-pages-current {
  display: none;
}

.dz-pages-list {
  max-height: min(30vh, 196px);
  padding: 0 4px 8px;
  outline: none;
}

.dz-pages-list:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(var(--dzt-accent-rgb, 255, 92, 168), 0.35);
  border-radius: var(--dz-r);
}

/* The tabs: Layers / Assets and Design / Roblox, as small pills. */
.dz-panel-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 40px;
  padding: 6px 6px;
  border-top: 1px solid var(--dz-line);
}

.dz-right .dz-panel-head {
  border-top: 0;
  border-bottom: 1px solid var(--dz-line);
}

.dz-left .dz-panel-head {
  border-bottom: 0;
}

.dz-panel-tabs {
  flex: 1;
  gap: 2px;
}

.dz-panel-tabs [role="tab"] {
  height: 28px;
  padding: 0 10px;
  border-radius: 8px;
}

.dz-panel-tabs [role="tab"][aria-selected="true"] {
  background: rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.08);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
}

.dz-panel-tabs [role="tab"][aria-selected="true"]::after {
  display: none;
}

.dz-panel-close {
  display: none;
}

.dz-panel-handle {
  display: none;
}

.dz-panel-body {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.dz-tabpanel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.dz-panel-scroll {
  flex: 1;
  min-height: 0;
}

.dz-panel-subhead {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 34px;
  padding: 6px 8px 2px 12px;
  color: var(--text);
  font: 700 11.5px/1.2 var(--font-body);
}

.dz-subhead-actions {
  display: flex;
  gap: 2px;
}

/* Drag the inner edge to resize a panel. */
.dz-resizer {
  position: absolute;
  top: 18px;
  bottom: 18px;
  z-index: 2;
  width: 10px;
  cursor: col-resize;
  touch-action: none;
}

.dz-left .dz-resizer {
  right: -2px;
}

.dz-right .dz-resizer {
  left: -2px;
}

.dz-resizer::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 4px;
  width: 2px;
  border-radius: 2px;
  background: transparent;
  transition: background-color var(--dz-fast) var(--dz-ease);
}

.dz-resizer:hover::after,
.dz-resizer:focus-visible::after,
.designer.is-resizing .dz-resizer::after {
  background: var(--accent-line);
}

.dz-resizer:focus-visible {
  outline: none;
}

.dz-panel-backdrop {
  display: none;
}

/* Read-only: what edits rests, values stay readable. */
.designer[data-readonly] .dz-panel :is(input, select, textarea):disabled,
.designer[data-readonly] .dz-panel .dz-swatch:disabled {
  opacity: 0.85;
  cursor: var(--nc-arrow, default);
}

.designer[data-readonly] .dz-panel .dz-number:has(input:disabled) .dz-number-label {
  cursor: var(--nc-arrow, default);
}

.designer[data-readonly] :is(.dz-layer-actions, .dz-layer-grip, .dz-page-handle, .dz-paint-handle) {
  visibility: hidden;
}

.dz-toolbar .dz-tool:disabled,
.dz-toolbar .dz-tool-more:disabled {
  opacity: 0.32;
  cursor: var(--nc-arrow, default);
  pointer-events: none;
}

/* ---------- chips: what a closed or minimized panel leaves ---------- */
.dz-float-chip {
  position: absolute;
  top: calc(var(--dz-edge) + var(--dz-safe-top));
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 44px;
  padding: 0 6px;
  border-radius: 14px;
  color: var(--text);
}

.dz-chip-left {
  left: calc(var(--dz-edge) + var(--dz-safe-left));
  max-width: min(320px, calc(100vw - 2 * var(--dz-edge)));
}

.dz-chip-name {
  min-width: 0;
  padding: 0 6px 0 4px;
  overflow: hidden;
  font: 650 13px/1 var(--font-display);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The right chip sits at the end of the top-right group. */
.dz-chip-right {
  position: static;
  height: 32px;
  padding: 0 10px 0 8px;
  gap: 6px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--text-2);
  font-size: var(--dz-fs);
  font-weight: 650;
  cursor: var(--nc-hand, pointer);
}

.dz-chip-right:hover {
  background: var(--dz-hover-bg);
  color: var(--text);
}

.dz-viewbar .dz-chip-right {
  position: relative;
  margin-left: 8px;
}

.dz-viewbar .dz-chip-right::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--dz-line-strong);
}

/* ---------- the top-right group: device, zoom, import, export ---------- */
.dz-viewbar {
  position: absolute;
  top: calc(var(--dz-edge) + var(--dz-safe-top));
  right: calc(var(--dz-right-space) + var(--dz-edge));
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: calc(100vw - var(--dz-left-space) - var(--dz-right-space) - 3 * var(--dz-edge));
  height: 44px;
  padding: 0 6px;
  border-radius: 14px;
  transition: right 260ms var(--dz-ease);
}

.dz-viewbar-sep {
  flex: none;
  width: 1px;
  height: 20px;
  margin: 0 3px;
  background: var(--dz-line-strong);
}

.dz-devicebar {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.dz-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--text-2);
  font-size: var(--dz-fs);
  font-weight: 650;
  white-space: nowrap;
  cursor: var(--nc-hand, pointer);
  transition: background-color var(--dz-fast) var(--dz-ease), border-color var(--dz-fast) var(--dz-ease), color var(--dz-fast) var(--dz-ease);
}

.dz-chip:hover {
  background: var(--dz-hover-bg);
  color: var(--text);
}

.dz-chip.is-active {
  border-color: var(--accent-line);
  background: var(--dz-selected);
  color: var(--accent-ink);
}

.dz-caret {
  width: 13px;
  height: 13px;
  color: var(--text-3);
}

.dz-device-label {
  color: var(--text);
}

.dz-device-size {
  color: var(--text-3);
  font: 500 11px/1 var(--font-mono);
}

.dz-icon-btn {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-2);
  cursor: var(--nc-hand, pointer);
  transition: background-color var(--dz-fast) var(--dz-ease), color var(--dz-fast) var(--dz-ease);
}

.dz-icon-btn:hover {
  background: var(--dz-hover-bg);
  color: var(--text);
}

.dz-icon-btn:disabled {
  opacity: 0.35;
  cursor: var(--nc-arrow, default);
}

.dz-icon-btn[aria-pressed="true"] {
  background: var(--dz-selected);
  color: var(--accent-ink);
}

.dz-dragmode {
  flex: none;
  height: 30px;
}

.dz-zoom {
  min-width: 68px;
  justify-content: space-between;
}

.dz-zoom-value {
  color: var(--text);
  font: 500 11.5px/1 var(--font-mono);
}

.dz-import,
.dz-export {
  height: 30px;
}

.dz-export {
  padding: 0 13px;
}

/* ---------- the tool bar: bottom center ---------- */
.dz-toolbar {
  position: absolute;
  left: var(--dz-left-space);
  right: var(--dz-right-space);
  bottom: calc(var(--dz-edge) + 4px + var(--dz-safe-bottom) + var(--dz-dock-h, 0px));
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 4px;
  width: max-content;
  max-width: calc(100% - var(--dz-left-space) - var(--dz-right-space) - 2 * var(--dz-edge));
  margin: 0 auto;
  padding: 5px;
  border-radius: 16px;
  transition: left 260ms var(--dz-ease), right 260ms var(--dz-ease);
}

.dz-toolbar-tools {
  display: flex;
  align-items: center;
  gap: 2px;
}

.dz-toolbar-extras {
  display: flex;
  align-items: center;
  padding-left: 4px;
  margin-left: 2px;
  border-left: 1px solid var(--dz-line);
}

.dz-toolbar .dz-toolbar-panel {
  display: none;
}

.dz-tool-group {
  position: relative;
  display: flex;
  align-items: center;
}

.dz-tool-group[data-group="frame"],
.dz-tool-group[data-group="draw"],
.dz-tool-group[data-group="text"] {
  margin-left: 6px;
}

.dz-tool-group[data-group="frame"]::before,
.dz-tool-group[data-group="draw"]::before,
.dz-tool-group[data-group="text"]::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--dz-line);
}

.dz-tool {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-2);
  cursor: var(--nc-hand, pointer);
  transition: background-color var(--dz-fast) var(--dz-ease), color var(--dz-fast) var(--dz-ease), box-shadow var(--dz-fast) var(--dz-ease), transform 120ms var(--dz-ease);
}

.dz-tool:hover {
  background: var(--dz-hover-bg);
  color: var(--text);
}

.dz-tool:active {
  transform: scale(0.95);
}

.dz-tool.is-active {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 60%),
    var(--dz-accent-fill);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset, 0 8px 18px -8px rgba(var(--dzt-accent-rgb, 255, 92, 168), calc(0.9 * var(--dzt-glow, 1)));
  color: var(--dzt-on-accent, #fff);
}

.dz-tool.is-quiet {
  color: var(--text-3);
}

/* The small arrow that opens a group's other tools. */
.dz-tool-more {
  display: grid;
  place-items: center;
  width: 14px;
  height: 36px;
  margin-left: -1px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-3);
  cursor: var(--nc-hand, pointer);
}

.dz-tool-more .dz-icon {
  width: 11px;
  height: 11px;
}

.dz-tool-more:hover,
.dz-tool-more.is-active {
  color: var(--text);
}

.dz-tool-more:hover {
  background: var(--dz-hover-bg);
}

/* ---------- banners, device strip ---------- */
.dz-banners {
  position: absolute;
  top: calc(var(--dz-edge) + 52px + var(--dz-safe-top));
  left: calc(var(--dz-left-space) + var(--dz-edge));
  right: calc(var(--dz-right-space) + var(--dz-edge));
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 6px;
  pointer-events: none;
}

.dz-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(680px, 100%);
  min-height: 42px;
  padding: 6px 6px 6px 12px;
  border: 1px solid var(--info-line);
  border-radius: 14px;
  background: linear-gradient(90deg, var(--info-soft), rgba(124, 199, 255, 0.04)), var(--dz-surface-strong);
  -webkit-backdrop-filter: var(--dz-blur);
  backdrop-filter: var(--dz-blur);
  box-shadow: var(--dz-shadow-float);
  color: var(--text);
  pointer-events: auto;
}

.dz-banner[data-tone="warning"] {
  border-color: var(--warn-line);
  background: linear-gradient(90deg, var(--warn-soft), rgba(246, 196, 83, 0.03)), var(--dz-surface-strong);
}

.dz-banner[data-tone="error"] {
  border-color: var(--dz-danger-line);
  background: linear-gradient(90deg, var(--dz-danger-soft), rgba(255, 92, 122, 0.03)), var(--dz-surface-strong);
}

.dz-banner[data-tone="success"] {
  border-color: var(--ok-line);
  background: linear-gradient(90deg, var(--ok-soft), rgba(61, 220, 151, 0.03)), var(--dz-surface-strong);
}

.dz-banner-icon {
  color: var(--info);
}

.dz-banner[data-tone="warning"] .dz-banner-icon {
  color: var(--warn);
}

.dz-banner[data-tone="error"] .dz-banner-icon {
  color: var(--dz-danger);
}

.dz-banner[data-tone="success"] .dz-banner-icon {
  color: var(--ok);
}

.dz-banner-text {
  flex: 1;
  min-width: 0;
  font-size: var(--dz-fs);
  font-weight: 600;
  line-height: 1.4;
}

.dz-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dz-devices-slot {
  position: absolute;
  left: calc(var(--dz-left-space) + var(--dz-edge));
  right: calc(var(--dz-right-space) + var(--dz-edge));
  bottom: calc(var(--dz-edge) + 64px + var(--dz-safe-bottom) + var(--dz-dock-h, 0px));
  z-index: 3;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

/* Docks other parts add along the bottom of the canvas (app.ui.dock: the motion timeline), between the panels. The
   tool bar and the device strip float above them (--dz-dock-h). */
.dz-dock-slot {
  position: absolute;
  left: calc(var(--dz-left-space) + var(--dz-edge));
  right: calc(var(--dz-right-space) + var(--dz-edge));
  bottom: calc(var(--dz-edge) + var(--dz-safe-bottom));
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
  transition: left 260ms var(--dz-ease), right 260ms var(--dz-ease);
}

.dz-dock-slot > * {
  pointer-events: auto;
}

.dz-devices {
  max-width: 100%;
  border-radius: 16px;
  pointer-events: auto;
}

.dz-devices-head {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 4px 0 12px;
  color: var(--text-3);
}

.dz-devices-title {
  color: var(--text);
  font-weight: 700;
}

.dz-devices-screen {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: var(--dz-fs-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dz-devices-list {
  display: flex;
  gap: 6px;
  padding: 0 10px 10px;
}

.dz-device-card {
  flex: none;
  display: grid;
  justify-items: start;
  gap: 4px;
  padding: 6px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text-2);
  cursor: var(--nc-hand, pointer);
  transition: background-color var(--dz-fast) var(--dz-ease), border-color var(--dz-fast) var(--dz-ease);
}

.dz-device-card:hover {
  background: var(--dz-hover-bg);
}

.dz-device-card.is-current {
  border-color: var(--accent-line);
  background: var(--dz-selected);
}

.dz-device-frame {
  display: block;
  padding: 3px;
  border-radius: 7px;
  background: #050407;
  box-shadow: 0 0 0 1px rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.1);
}

.dz-device-canvas {
  display: block;
  width: var(--w, 132px);
  height: var(--h, 74px);
  border-radius: 4px;
  background: var(--dz-checker);
}

.dz-device-card-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--dz-fs-sm);
  font-weight: 650;
}

.dz-device-card-label .dz-icon {
  width: 13px;
  height: 13px;
}

.dz-device-card-size {
  color: var(--text-3);
  font: 500 10.5px/1 var(--font-mono);
}

/* ---------- the phone top bar (hidden on bigger screens) ---------- */
.dz-phonebar {
  display: none;
}

/* ============================================================================================================
   5. Above the window: popovers, menus, sheets, dialogs, toasts, tooltips, palette
   ============================================================================================================ */

.dz-layer {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
}

.dz-layer > * {
  pointer-events: auto;
}

.dz-backdrop {
  position: fixed;
  inset: 0;
  background: var(--dz-dim);
  opacity: 0;
  transition: opacity 200ms var(--dz-ease);
}

.dz-backdrop.is-open {
  opacity: 1;
}

.dz-backdrop.is-palette {
  background: rgba(var(--dzt-scrim-rgb, 5, 4, 8), 0.34);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.dz-overlay {
  opacity: 0;
  transition: opacity var(--dz-fast) var(--dz-ease), transform var(--dz-fast) var(--dz-ease);
}

.dz-overlay.is-open {
  opacity: 1;
}

.dz-overlay.is-closing {
  opacity: 0;
  pointer-events: none;
}

/* Popovers next to their button. */
.dz-pop {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
  max-height: var(--dz-pop-max-h, calc(100vh - 16px));
  max-height: var(--dz-pop-max-h, calc(100dvh - 16px));
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--glass-border-hover);
  border-radius: 12px;
  background: var(--dz-surface-strong);
  -webkit-backdrop-filter: var(--dz-blur);
  backdrop-filter: var(--dz-blur);
  box-shadow: var(--dz-shadow-pop);
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.16) transparent;
  transform: translateY(-3px) scale(0.985);
  transform-origin: top left;
}

.dz-pop[data-side="top"] {
  transform: translateY(3px) scale(0.985);
  transform-origin: bottom left;
}

.dz-pop[data-side="left"] {
  transform: translateX(3px) scale(0.985);
  transform-origin: top right;
}

.dz-pop.is-open {
  transform: none;
}

/* A popover's title row moves it on computers (ui/overlay.js movable()): a move cursor over the row and its title;
   its buttons, fields and dropdowns keep their own cursor. While it moves, nothing else reacts or gets selected. */
@media (any-pointer: fine) and (min-width: 720px) {
  .dz-pop.is-movable > * > :is(.dz-picker-head, .dz-thread-head, .dz-install-head, [data-dz-move]) {
    cursor: move;
  }

  :where(.dz-pop.is-movable > * > :is(.dz-picker-head, .dz-thread-head, .dz-install-head, [data-dz-move])) :where(button, select, a[href], label, [role="button"], [role="tab"]) {
    cursor: var(--nc-hand, pointer);
  }

  :where(.dz-pop.is-movable > * > :is(.dz-picker-head, .dz-thread-head, .dz-install-head, [data-dz-move])) :where(input, textarea) {
    cursor: auto;
  }

  /* An effect's head has no title: its type dropdown keeps to its words, leaving room to grab the row. */
  .dz-pop.is-movable .dz-effect-head > .dz-effect-type {
    flex: 0 1 auto;
    width: auto;
    field-sizing: content;
    margin-right: auto;
  }
}

.dz-pop.is-moving,
.dz-pop.is-moving * {
  cursor: move !important;
  -webkit-user-select: none;
  user-select: none;
}

/* Menus. */
.dz-menu {
  min-width: 220px;
  max-width: min(340px, calc(100vw - 16px));
  padding: 5px;
  outline: none;
}

.dz-menu-section {
  display: grid;
}

.dz-menu-heading {
  padding: 6px 10px 4px 30px;
  color: var(--text-3);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dz-menu-sep {
  height: 1px;
  margin: 5px 6px;
  background: var(--dz-line);
}

.dz-menu-item {
  display: grid;
  grid-template-columns: 18px 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-height: 28px;
  padding: 0 10px 0 6px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  font-size: var(--dz-fs);
  font-weight: 550;
  text-align: left;
  cursor: var(--nc-hand, pointer);
}

.dz-menu-item:not(:has(.dz-menu-icon, .dz-menu-swatch)) {
  grid-template-columns: 18px minmax(0, 1fr) auto;
}

.dz-menu-item.is-active {
  background: rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.08);
}

.dz-menu-item:focus-visible {
  outline: none;
  background: rgba(var(--dzt-accent-rgb, 255, 92, 168), 0.18);
}

.dz-menu-item[aria-disabled="true"] {
  color: var(--text-3);
  cursor: var(--nc-arrow, default);
  opacity: 0.6;
}

.dz-menu-item.is-danger {
  color: var(--dz-danger-ink);
}

.dz-menu-check {
  display: grid;
  place-items: center;
  color: var(--accent-ink);
}

.dz-menu-check .dz-icon {
  width: 14px;
  height: 14px;
}

.dz-menu-icon {
  display: grid;
  place-items: center;
  color: var(--text-2);
}

.dz-menu-swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--swatch, transparent);
  box-shadow: 0 0 0 1px rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.15) inset;
}

.dz-menu-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dz-menu-keys {
  padding-left: 18px;
  color: var(--text-3);
  font: 500 11px/1 var(--font-mono);
  white-space: nowrap;
}

.dz-menu-sub {
  color: var(--text-3);
}

.dz-menu-sub .dz-icon {
  width: 14px;
  height: 14px;
}

.dz-menu-empty {
  padding: 10px 12px;
  color: var(--text-3);
}

/* Bottom sheets (phones). */
.dz-sheet {
  --dz-sheet-drag: 0px;
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--dz-keyboard);
  z-index: 1;
  display: flex;
  flex-direction: column;
  max-height: min(calc(80dvh - var(--dz-keyboard)), 640px);
  padding: 0 var(--dz-safe-right) env(safe-area-inset-bottom) var(--dz-safe-left);
  border: 1px solid var(--glass-border-hover);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  background: var(--dz-surface-strong);
  -webkit-backdrop-filter: var(--dz-blur);
  backdrop-filter: var(--dz-blur);
  box-shadow: var(--dz-shadow-pop);
  transform: translateY(calc(100% + 20px));
  transition: transform 260ms var(--dz-ease), opacity 200ms var(--dz-ease);
}

.dz-sheet.is-open {
  transform: translateY(var(--dz-sheet-drag));
}

.dz-sheet.is-dragging {
  transition: none;
}

.dz-sheet.is-full {
  height: 92vh;
  max-height: none;
}

.dz-sheet-handle {
  flex: none;
  position: relative;
  height: 22px;
  cursor: grab;
  touch-action: none;
}

.dz-sheet-handle::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 40px;
  height: 4px;
  border-radius: 4px;
  background: rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.26);
  transform: translateX(-50%);
}

.dz-sheet-head {
  flex: none;
  padding: 0 16px 8px;
  touch-action: none;
}

.dz-sheet-title {
  font: 650 15px/1.3 var(--font-display);
}

.dz-sheet-body {
  flex: 1;
  min-height: 0;
  padding: 0 6px 10px;
}

.dz-sheet .dz-menu {
  min-width: 0;
  max-width: none;
  padding: 0;
}

.dz-sheet .dz-menu-item {
  min-height: 44px;
  font-size: 14px;
}

.dz-sheet .dz-picker {
  width: auto;
}

/* Dialogs. */
.dz-dialog {
  position: fixed;
  left: 50%;
  /* Centred in what the on-screen keyboard leaves free (tablets; phones use bottom sheets). */
  top: calc(50% - var(--dz-keyboard) / 2);
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px - var(--dz-keyboard));
  border: 1px solid var(--glass-border-hover);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(var(--dzt-accent-rgb, 255, 92, 168), calc(0.06 * var(--dzt-glow, 1))), transparent 60%),
    var(--dz-surface-strong);
  -webkit-backdrop-filter: var(--dz-blur);
  backdrop-filter: var(--dz-blur);
  box-shadow: var(--dz-shadow-pop);
  transform: translate(-50%, -48%) scale(0.98);
}

.dz-dialog.is-open {
  transform: translate(-50%, -50%);
}

.dz-dialog.is-wide {
  width: min(760px, calc(100vw - 32px));
}

.dz-dialog.is-full {
  width: min(1180px, calc(100vw - 32px));
  height: calc(100vh - 48px);
  height: calc(100dvh - 48px - var(--dz-keyboard));
}

.dz-dialog.is-busy {
  cursor: progress;
}

.dz-dialog-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 14px 6px 20px;
}

.dz-dialog-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--info-soft);
  color: var(--info);
}

.dz-dialog-icon[data-tone="warning"] {
  background: var(--warn-soft);
  color: var(--warn);
}

.dz-dialog-icon[data-tone="error"] {
  background: var(--dz-danger-soft);
  color: var(--dz-danger);
}

.dz-dialog-icon[data-tone="success"] {
  background: var(--ok-soft);
  color: var(--ok);
}

.dz-dialog-title {
  flex: 1;
  min-width: 0;
  font: 650 17px/1.25 var(--font-display);
  letter-spacing: -0.015em;
}

.dz-dialog-close {
  align-self: flex-start;
}

.dz-dialog-body {
  flex: 1;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 6px 20px 18px;
  font-size: 13px;
  line-height: 1.55;
}

.dz-dialog-text {
  color: var(--text-2);
}

.dz-dialog-actions {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px 18px;
  border-top: 1px solid var(--dz-line);
}

.dz-dialog-actions .dz-btn {
  height: 32px;
  padding: 0 14px;
}

/* Toasts. */
.dz-toasts {
  position: fixed;
  left: 50%;
  bottom: calc(18px + var(--dz-safe-bottom) + var(--dz-keyboard));
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 8px;
  width: min(460px, calc(100vw - 24px));
  transform: translateX(-50%);
  pointer-events: none;
}

.dz-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  max-width: 100%;
  padding: 6px 6px 6px 12px;
  border: 1px solid var(--glass-border-hover);
  border-radius: 12px;
  background: var(--dz-surface-solid);
  box-shadow: var(--dz-shadow-pop);
  color: var(--text);
  font-size: var(--dz-fs);
  font-weight: 600;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transition: opacity 200ms var(--dz-ease), transform 260ms var(--dz-ease);
}

.dz-toast.is-open {
  opacity: 1;
  transform: none;
}

.dz-toast.is-closing {
  opacity: 0;
  transform: translateY(6px);
}

.dz-toast-icon {
  color: var(--info);
}

.dz-toast[data-tone="success"] .dz-toast-icon {
  color: var(--ok);
}

.dz-toast[data-tone="warning"] .dz-toast-icon {
  color: var(--warn);
}

.dz-toast[data-tone="error"] {
  border-color: var(--dz-danger-line);
}

.dz-toast[data-tone="error"] .dz-toast-icon {
  color: var(--dz-danger);
}

.dz-toast-text {
  flex: 1;
  min-width: 0;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.dz-toast-action {
  flex: none;
  height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: rgba(var(--dzt-accent-rgb, 255, 92, 168), 0.16);
  color: var(--accent-ink);
  font-size: var(--dz-fs);
  font-weight: 700;
  cursor: var(--nc-hand, pointer);
}

.dz-toast-action:hover {
  background: rgba(var(--dzt-accent-rgb, 255, 92, 168), 0.26);
}

.dz-toast-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-3);
  cursor: var(--nc-hand, pointer);
}

.dz-toast-close:hover {
  background: var(--dz-hover-bg);
  color: var(--text);
}

/* Tooltips. */
.dz-tooltip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 280px;
  padding: 6px 9px;
  border: 1px solid var(--glass-border-hover);
  border-radius: 8px;
  background: var(--dz-surface-solid);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.8);
  color: var(--text);
  font-size: var(--dz-fs-sm);
  font-weight: 600;
  line-height: 1.35;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 120ms var(--dz-ease), visibility 120ms;
}

.dz-tooltip.is-open {
  opacity: 1;
  visibility: visible;
}

.dz-tooltip-keys {
  display: flex;
  gap: 3px;
}

.dz-tooltip .dz-kbd {
  height: 17px;
  min-width: 17px;
  font-size: 10px;
}

/* Dragged rows and assets follow the pointer. */
.dz-drag-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 20;
  max-width: 220px;
  padding: 5px 10px;
  overflow: hidden;
  border: 1px solid var(--accent-line);
  border-radius: 8px;
  background: var(--dz-surface-strong);
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.8);
  color: var(--text);
  font-size: var(--dz-fs);
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(var(--x, -999px), var(--y, -999px));
}

/* A dragged row's name, and why it can't go there (Layers ordered like Studio). */
.dz-drag-ghost-name,
.dz-drag-ghost-note {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dz-drag-ghost-note {
  margin-top: 2px;
  color: var(--text-3);
  font-size: var(--dz-fs-sm);
  font-weight: 500;
  white-space: normal;
}

/* The command palette. */
.dz-palette {
  position: fixed;
  top: min(14vh, 120px);
  left: 50%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(620px, calc(100vw - 24px));
  max-height: min(560px, calc(100vh - 2 * min(14vh, 120px)));
  max-height: min(560px, calc(100dvh - 2 * min(14vh, 120px) - var(--dz-keyboard)));
  overflow: hidden;
  border: 1px solid var(--glass-border-hover);
  border-radius: 16px;
  background: var(--dz-surface-strong);
  -webkit-backdrop-filter: var(--dz-blur);
  backdrop-filter: var(--dz-blur);
  box-shadow: var(--dz-shadow-pop);
  transform: translate(-50%, -6px) scale(0.985);
}

.dz-palette.is-open {
  transform: translate(-50%, 0);
}

.dz-palette-search {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid var(--dz-line);
  color: var(--text-3);
}

.dz-palette-input {
  flex: 1;
  height: 52px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: 550 15px/1 var(--font-body);
}

.dz-palette-input::placeholder {
  color: var(--text-3);
}

.dz-palette-list {
  flex: 1;
  min-height: 0;
  padding: 6px;
}

.dz-palette-group {
  padding: 10px 10px 4px;
  color: var(--text-3);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.dz-palette-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 0 10px;
  border-radius: 9px;
  color: var(--text);
  font-size: 13px;
  cursor: var(--nc-hand, pointer);
}

.dz-palette-item.is-active {
  background: rgba(var(--dzt-accent-rgb, 255, 92, 168), 0.14);
  box-shadow: 0 0 0 1px rgba(var(--dzt-accent-rgb, 255, 92, 168), 0.22) inset;
}

.dz-palette-item.is-disabled {
  color: var(--text-3);
}

.dz-palette-icon {
  display: grid;
  place-items: center;
  width: 18px;
  color: var(--text-2);
}

.dz-palette-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dz-palette-title mark {
  background: transparent;
  color: var(--accent-ink);
  font-weight: 750;
}

.dz-palette-group-name,
.dz-palette-note {
  color: var(--text-3);
  font-size: var(--dz-fs-sm);
  white-space: nowrap;
}

.dz-palette-empty {
  padding: 24px;
  color: var(--text-3);
  text-align: center;
}

.dz-palette-foot {
  flex: none;
  display: flex;
  gap: 16px;
  padding: 8px 14px;
  border-top: 1px solid var(--dz-line);
  color: var(--text-3);
  font-size: var(--dz-fs-sm);
}

.dz-palette-foot span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.dz-palette-foot .dz-kbd + .dz-kbd {
  margin-left: 0;
}

/* ============================================================================================================
   6. Panel contents
   ============================================================================================================ */

/* ---------- layers ---------- */
.dz-layers {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.dz-layers-search {
  flex: none;
  position: relative;
  display: flex;
  align-items: center;
  margin: 8px 8px 4px;
  color: var(--text-3);
}

.dz-layers-search > .dz-icon {
  position: absolute;
  left: 8px;
  width: 14px;
  height: 14px;
}

.dz-layers-search-input {
  padding-left: 28px;
}

/* The panel's menu (Order like Studio, Fold all layers), at the end of the search row. */
.dz-layers-menu {
  flex: none;
  margin-left: 4px;
}

.dz-layers-tree {
  position: relative;
  flex: 1;
  min-height: 0;
  padding: 2px 0 12px;
  outline: none;
}

.dz-layers-tree:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(var(--dzt-accent-rgb, 255, 92, 168), 0.35);
  border-radius: 0 0 var(--dz-r-lg) var(--dz-r-lg);
}

.dz-layers-spacer {
  position: relative;
  min-height: 1px;
}

.dz-layer-row {
  position: absolute;
  left: 4px;
  right: 4px;
  top: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  height: var(--dz-row-h);
  padding-left: calc(var(--depth, 0) * var(--dz-indent) + 2px);
  padding-right: 4px;
  border-radius: 6px;
  color: var(--text-2);
  font-size: var(--dz-fs);
  transform: translateY(var(--y, 0));
  cursor: var(--nc-arrow, default);
  user-select: none;
  touch-action: pan-y;
  contain: layout style;
}

.dz-layer-row:hover {
  background: var(--dz-hover-bg);
  color: var(--text);
}

.dz-layer-row.is-in-selection {
  background: var(--dz-in-selection);
}

.dz-layer-row.is-selected {
  background: var(--dz-selected);
  color: var(--text);
}

.dz-layer-row.is-selected:hover {
  background: var(--dz-selected-hover);
}

.dz-layers-tree:focus-visible .dz-layer-row.is-active {
  box-shadow: inset 0 0 0 1.5px var(--accent);
}

.dz-layer-row.is-context {
  color: var(--text-3);
}

.dz-layer-row.is-hidden-layer :is(.dz-layer-name, .dz-layer-icon) {
  opacity: 0.45;
}

.dz-layer-twisty {
  flex: none;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-3);
  cursor: var(--nc-hand, pointer);
  visibility: hidden;
}

.dz-layer-twisty .dz-icon {
  width: 12px;
  height: 12px;
  transition: transform var(--dz-fast) var(--dz-ease);
}

.dz-layer-row.has-children .dz-layer-twisty {
  visibility: visible;
}

/* The arrow looks 16 px but takes a 24 px pointer. */
.dz-layer-twisty {
  position: relative;
}

.dz-layer-twisty::before {
  content: "";
  position: absolute;
  inset: -4px;
}

.dz-layer-row.is-open .dz-layer-twisty .dz-icon {
  transform: rotate(90deg);
}

.dz-layer-twisty:hover {
  color: var(--text);
  background: var(--dz-hover-bg);
}

.dz-layer-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 16px;
  color: var(--text-3);
}

.dz-layer-icon .dz-icon {
  width: 14px;
  height: 14px;
}

.dz-layer-row.is-selected .dz-layer-icon {
  color: var(--accent-ink);
}

/* A layer a mask cuts (core/masks.js): a line in its indent down to the mask; the top one of a mask's layers starts
   it with a small round corner. */
.dz-layer-row.is-masked::before {
  content: "";
  position: absolute;
  left: calc(var(--depth, 0) * var(--dz-indent) - 6px);
  top: 0;
  bottom: 0;
  width: 6px;
  border-left: 1.5px solid currentColor;
  opacity: 0.4;
  pointer-events: none;
}

.dz-layer-row.is-masked.is-masked-end::before {
  top: 50%;
  border-top: 1.5px solid currentColor;
  border-top-left-radius: 4px;
}

/* The Mask section's type control fills its row. */
.dz-mask-types {
  flex: 1;
  width: 100%;
}

.dz-layer-row.is-component,
.dz-layer-row.is-component .dz-layer-icon {
  color: var(--dz-component);
}

.dz-layer-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dz-layer-row:has(> .dz-layer-twisty) .dz-layer-name {
  font-weight: 550;
}

.dz-layer-rename {
  width: 100%;
  height: calc(var(--dz-row-h) - 6px);
  padding: 0 5px;
  border: 1px solid var(--accent-line);
  border-radius: 5px;
  background: rgba(var(--dzt-well-rgb, 10, 8, 14), 0.9);
  color: var(--text);
  font-size: var(--dz-fs);
}

.dz-layer-actions {
  flex: none;
  display: flex;
  gap: 1px;
}

.dz-layer-action {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-3);
  cursor: var(--nc-hand, pointer);
  opacity: 0;
}

.dz-layer-action .dz-icon {
  width: 14px;
  height: 14px;
}

/* The drag grip: only on touch screens, where the row itself scrolls the list. */
.dz-layer-grip {
  display: none;
  place-items: center;
  width: 30px;
  height: 100%;
  color: var(--text-3);
  touch-action: none;
  cursor: grab;
}

.dz-layer-grip .dz-icon {
  width: 14px;
  height: 14px;
}

@media (pointer: coarse) {
  .dz-layer-grip {
    display: grid;
  }
}

.dz-layer-action:hover {
  background: var(--dz-hover-bg);
  color: var(--text);
}

.dz-layer-row:hover .dz-layer-action,
.dz-layer-row.is-locked .dz-layer-action.is-lock,
.dz-layer-row.is-hidden-layer .dz-layer-action.is-eye {
  opacity: 1;
}

.dz-layers-tree.is-dragging .dz-layer-row:hover {
  background: transparent;
}

.dz-drop-line {
  position: absolute;
  left: calc(var(--depth, 0) * var(--dz-indent) + 22px);
  right: 8px;
  top: 0;
  z-index: 2;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 0 1px rgba(var(--dzt-well-rgb, 10, 8, 14), 0.8);
  transform: translateY(var(--y, 0));
  pointer-events: none;
}

.dz-drop-line::before {
  content: "";
  position: absolute;
  left: -4px;
  top: -3px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--bg);
}

.dz-drop-box {
  position: absolute;
  left: calc(var(--depth, 0) * var(--dz-indent) + 4px);
  right: 4px;
  top: 0;
  z-index: 2;
  height: var(--dz-row-h);
  border: 1.5px solid var(--accent);
  border-radius: 6px;
  background: rgba(var(--dzt-accent-rgb, 255, 92, 168), 0.08);
  transform: translateY(var(--y, 0));
  pointer-events: none;
}

.dz-layers-empty {
  flex: 1;
  align-content: center;
}

.dz-layers-nomatch {
  padding: 12px 16px;
}

/* ---------- pages ---------- */
.dz-page-row {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 8px 0 2px;
  border-radius: 7px;
  color: var(--text-2);
  cursor: var(--nc-hand, pointer);
  user-select: none;
  transform: translateY(var(--drag-y, 0));
}

.dz-page-row:hover {
  background: var(--dz-hover-bg);
  color: var(--text);
}

.dz-page-row.is-current {
  background: var(--dz-selected);
  color: var(--text);
}

.dz-page-row.is-dragging {
  position: relative;
  z-index: 2;
  background: var(--dz-surface-strong);
  box-shadow: var(--dz-shadow-pop);
}

.dz-page-row.is-drop-before {
  box-shadow: inset 0 2px 0 var(--accent);
}

.dz-page-row.is-drop-after {
  box-shadow: inset 0 -2px 0 var(--accent);
}

.dz-page-handle,
.dz-paint-handle {
  flex: none;
  display: grid;
  place-items: center;
  width: 16px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-3);
  cursor: grab;
  opacity: 0.35;
  touch-action: none;
}

.dz-page-handle .dz-icon,
.dz-paint-handle .dz-icon {
  width: 12px;
  height: 12px;
}

.dz-page-row:hover .dz-page-handle,
.dz-paint-row:hover .dz-paint-handle,
.dz-page-handle:focus-visible,
.dz-paint-handle:focus-visible {
  opacity: 1;
}

.dz-page-swatch {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--swatch, #1a1720);
  box-shadow: 0 0 0 1px rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.28);
}

.dz-page-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.dz-page-count {
  color: var(--text-3);
  font-size: var(--dz-fs-sm);
  white-space: nowrap;
}

.dz-page-rename {
  flex: 1;
  min-width: 0;
  height: 24px;
  padding: 0 6px;
  border: 1px solid var(--accent-line);
  border-radius: 5px;
  background: rgba(var(--dzt-well-rgb, 10, 8, 14), 0.9);
  color: var(--text);
}

/* ---------- assets ---------- */
.dz-assets {
  flex: 1;
  min-height: 0;
  padding-bottom: 12px;
}

.dz-asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  padding: 4px 10px 8px;
}

.dz-asset-card {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 5px;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: grab;
  touch-action: pan-y;
  transition: background-color var(--dz-fast) var(--dz-ease), border-color var(--dz-fast) var(--dz-ease);
}

.dz-asset-card:hover {
  border-color: var(--dz-line);
  background: var(--dz-hover-bg);
}

.dz-asset-media {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 7px;
  background: var(--dz-checker);
  box-shadow: 0 0 0 1px rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.07) inset;
}

.dz-asset-thumb {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.dz-asset-thumb.is-missing {
  opacity: 0;
}

.dz-asset-name {
  overflow: hidden;
  color: var(--text);
  font-size: var(--dz-fs-sm);
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dz-asset-meta {
  overflow: hidden;
  color: var(--text-3);
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dz-component-list {
  display: grid;
  gap: 2px;
  padding: 2px 6px 8px;
}

.dz-component-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 4px 8px;
  border-radius: 8px;
  color: var(--text);
  cursor: grab;
  touch-action: pan-y;
}

.dz-component-row:hover {
  background: var(--dz-hover-bg);
}

.dz-component-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: rgba(var(--dzt-violet-rgb, 185, 140, 255), 0.12);
  color: var(--dz-component);
}

.dz-component-text {
  flex: 1;
  min-width: 0;
  display: grid;
}

.dz-component-name {
  overflow: hidden;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dz-component-desc {
  overflow: hidden;
  color: var(--text-3);
  font-size: var(--dz-fs-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dz-assets > .dz-hint {
  padding: 4px 14px;
}

/* ---------- properties: selection header and rows ---------- */
.dz-sel {
  display: grid;
  gap: 6px;
  padding: 10px 10px 8px;
  border-bottom: 1px solid var(--dz-line);
}

.dz-sel-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dz-sel-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--dz-line);
  border-radius: 10px;
  background: rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.04);
  color: var(--text-2);
}

.dz-sel-icon.is-component {
  border-color: rgba(var(--dzt-violet-rgb, 185, 140, 255), 0.35);
  background: rgba(var(--dzt-violet-rgb, 185, 140, 255), 0.1);
  color: var(--dz-component);
}

.dz-sel-titles {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}

.dz-sel-kind {
  overflow: hidden;
  color: var(--text-3);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.dz-sel-name.dz-input {
  height: 26px;
  margin-left: -6px;
  padding: 0 6px;
  background: transparent;
  font: 650 13px/1 var(--font-display);
}

.dz-sel-name.dz-input:hover {
  background: var(--dz-field);
}

.dz-sel-count {
  color: var(--text-3);
  font-size: var(--dz-fs-sm);
}

.dz-align-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
}

.dz-prop-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.dz-prop-row.is-split {
  justify-content: space-between;
}

.dz-prop-row > .dz-seg {
  flex: 1;
}

.dz-prop-row.is-kind > .dz-seg.is-icons {
  flex: none;
}

.dz-prop-row.is-split > .dz-seg {
  flex: 0 1 auto;
}

.dz-prop-label {
  flex: none;
  width: 74px;
  color: var(--text-3);
  font-size: var(--dz-fs-sm);
  font-weight: 650;
}

.dz-prop-controls {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dz-prop-controls > * {
  flex: 1;
  min-width: 0;
}

.dz-prop-controls > .dz-swatch,
.dz-prop-controls > .dz-number.is-compact {
  flex: none;
}

.dz-prop-controls.is-two > * {
  flex: 1 1 0;
}

.dz-prop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.dz-prop-grid.is-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dz-prop-grid.is-weight {
  grid-template-columns: minmax(0, 1fr) auto;
}

.dz-subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 24px;
  margin-top: 2px;
  color: var(--text-2);
  font-size: var(--dz-fs-sm);
  font-weight: 700;
}

.dz-subhead-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dz-switches {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 16px;
}

.dz-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dz-readout {
  color: var(--text-3);
  font: 500 10.5px/1.4 var(--font-mono);
}

.dz-select-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 12px 4px;
  padding: 10px 12px;
  border: 1px dashed var(--dz-line-strong);
  border-radius: var(--dz-r);
  color: var(--text-3);
  font-size: var(--dz-fs);
}

.dz-select-hint .dz-icon {
  flex: none;
  color: var(--text-2);
}

/* UDim2: axis letter, Scale, Offset, convert. */
.dz-udim {
  display: grid;
  gap: 4px;
}

.dz-udim-head,
.dz-udim-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 24px;
  align-items: center;
  gap: 6px;
}

.dz-udim-row.is-pair {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* Outside Roblox screens a pair is just its pixels (ui/properties/autolayout.js pairLook). */
.dz-udim-row.is-pair.is-plain {
  grid-template-columns: minmax(0, 1fr);
}

/* Plain padding: "All", then the four sides two by two. */
.dz-padding.is-plain {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dz-padding.is-plain > .dz-number:first-child {
  grid-column: 1 / -1;
}

.dz-udim-head {
  padding-left: 2px;
  color: var(--text-3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dz-udim-axis {
  color: var(--text-2);
  font-size: var(--dz-fs-sm);
  font-weight: 700;
  text-align: center;
}

.dz-udim-row .dz-number-label {
  min-width: 18px;
}

.dz-udim-gap {
  height: 4px;
}

.dz-udim-convert {
  color: var(--text-3);
}

.dz-udim-row[data-mode="scale"] .dz-number:first-of-type .dz-number-input,
.dz-udim-row[data-mode="offset"] .dz-number:last-of-type .dz-number-input {
  color: var(--text);
}

.dz-udim.is-position-off .dz-udim-row[data-axis^="position"],
.dz-udim.is-size-off .dz-udim-row[data-axis^="size"] {
  opacity: 0.45;
}

/* AnchorPoint picker: 3 x 3 dots in a box. */
.dz-anchor-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dz-anchor-grid {
  flex: none;
  display: grid;
  grid-template-columns: repeat(3, 18px);
  grid-template-rows: repeat(3, 18px);
  padding: 4px;
  border: 1px solid var(--dz-line-strong);
  border-radius: 8px;
  background: var(--dz-field);
}

.dz-anchor-dot {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: var(--nc-hand, pointer);
}

.dz-anchor-dot::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.28);
  transition: transform var(--dz-fast) var(--dz-ease), background-color var(--dz-fast) var(--dz-ease);
}

.dz-anchor-dot:hover::after {
  background: rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.6);
  transform: scale(1.3);
}

.dz-anchor-dot[aria-pressed="true"]::after {
  width: 8px;
  height: 8px;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--dzt-accent-rgb, 255, 92, 168), 0.22);
}

.dz-anchor-fields {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 4px;
}

.dz-pin-row {
  display: grid;
  gap: 5px;
}

.dz-pin-row .dz-subhead {
  margin-top: 0;
}

/* A Roblox screen's auto AnchorPoint and units (ui/properties/screen-auto.js), and what a layer gets in Studio. */
.dz-screen-auto {
  display: grid;
  gap: 6px;
  margin-top: 4px;
}

.dz-auto-anchor-row .dz-prop-controls {
  gap: 12px;
}

.dz-auto-anchor-row .dz-prop-controls > .dz-anchor-grid,
.dz-auto-anchor-row .dz-prop-controls > .dz-switch {
  flex: none;
}

.dz-auto-anchor.is-off .dz-anchor-dot::after {
  opacity: 0.55;
}

/* Keep / Scale / Offset fit the narrower Roblox tab too. */
.dz-screen-auto .dz-seg > button {
  padding-inline: 4px;
}

.dz-auto-own {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.dz-auto-own > .dz-hint {
  margin: 0;
}

.dz-auto-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.dz-auto-line > .dz-auto-toggle {
  flex: none;
}

.dz-auto-readout {
  flex: 1;
  min-width: 0;
  margin: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* Auto layout: the alignment grid. */
.dz-align-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.dz-align-grid {
  flex: none;
  display: grid;
  grid-template-columns: repeat(3, 22px);
  grid-template-rows: repeat(3, 22px);
  padding: 4px;
  border-radius: 8px;
  background: var(--dz-field);
}

.dz-align-cell {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  cursor: var(--nc-hand, pointer);
}

.dz-align-cell span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.3);
  transition: all var(--dz-fast) var(--dz-ease);
}

.dz-align-cell:hover span {
  background: rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.65);
}

.dz-align-cell[aria-pressed="true"] span {
  width: 12px;
  height: 4px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 5px 0 rgba(var(--dzt-accent-rgb, 255, 92, 168), 0.55), 0 -5px 0 rgba(var(--dzt-accent-rgb, 255, 92, 168), 0.55);
}

.dz-align-side {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 6px;
}

.dz-layout-body,
.dz-layout-list,
.dz-layout-grid,
.dz-padding,
.dz-rule,
.dz-tile {
  display: grid;
  gap: 6px;
}

.dz-radius-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dz-radius-row > .dz-number {
  flex: 1;
}

/* Paint rows: handle, swatch, hex, opacity, eye, remove. */
.dz-paint-list,
.dz-effect-list {
  display: grid;
  gap: 4px;
}

.dz-paint-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  transform: translateY(var(--drag-y, 0));
}

.dz-paint-row.is-hidden > :not(.dz-btn):not(.dz-paint-handle) {
  opacity: 0.45;
}

.dz-paint-row.is-dragging {
  z-index: 2;
  border-radius: 8px;
  background: var(--dz-surface-strong);
  box-shadow: var(--dz-shadow-pop);
}

.dz-paint-row.is-drop-before {
  box-shadow: 0 -2px 0 var(--accent);
}

.dz-paint-row.is-drop-after {
  box-shadow: 0 2px 0 var(--accent);
}

.dz-paint-row.is-single {
  padding-left: 0;
}

.dz-paint-row.is-effect > .dz-select {
  flex: 1;
}

.dz-paint-label {
  flex: 1;
  min-width: 0;
  display: flex;
}

.dz-paint-hex {
  font: 500 11.5px/1 var(--font-mono);
  text-transform: uppercase;
}

.dz-paint-type {
  flex: 1;
  min-width: 0;
  height: var(--dz-h);
  padding: 0 8px;
  overflow: hidden;
  border: 0;
  border-radius: var(--dz-r-sm);
  background: var(--dz-field);
  color: var(--text);
  font-size: var(--dz-fs);
  font-weight: 600;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: var(--nc-hand, pointer);
}

.dz-paint-type:hover {
  background: var(--dz-field-hover);
}

.dz-stroke-details,
.dz-effect-details {
  display: grid;
  gap: 6px;
  margin: 2px 0 6px 21px;
}

.dz-dash {
  font-family: var(--font-mono);
}

.dz-shadow-color {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* A stroke's row (properties/paints.js): its paint like a fill's, then its weight and the settings button. One line
   when the panel is wide enough; else the weight and the button go on a second line, under the color. */
.dz-paint-list.is-strokes {
  container-type: inline-size;
}

.dz-paint-row.is-stroke {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto auto;
  grid-template-areas:
    "handle swatch label opacity eye remove"
    ". . weight . settings .";
  gap: 4px 5px;
}

.dz-paint-row.is-stroke > .dz-paint-handle { grid-area: handle; }
.dz-paint-row.is-stroke > .dz-swatch { grid-area: swatch; }
.dz-paint-row.is-stroke > .dz-paint-label { grid-area: label; }
.dz-paint-row.is-stroke > .dz-paint-opacity { grid-area: opacity; }
.dz-paint-row.is-stroke > .dz-stroke-weight { grid-area: weight; width: auto; }
.dz-paint-row.is-stroke > .dz-stroke-settings { grid-area: settings; }
.dz-paint-row.is-stroke > .dz-paint-eye { grid-area: eye; }
.dz-paint-row.is-stroke > .dz-paint-remove { grid-area: remove; }

/* One line from the width where the color keeps room for its hex (bigger controls on tablets need more; never on
   phones, where every control is 44 px). */
@container (min-width: 340px) {
  .designer[data-layout="desktop"] .dz-paint-row.is-stroke {
    grid-template-columns: auto auto minmax(0, 1fr) auto auto auto auto auto;
    grid-template-areas: "handle swatch label opacity weight settings eye remove";
  }

  .designer[data-layout="desktop"] .dz-paint-row.is-stroke > .dz-stroke-weight {
    width: 64px;
  }
}

@container (min-width: 400px) {
  .designer[data-layout="tablet"] .dz-paint-row.is-stroke {
    grid-template-columns: auto auto minmax(0, 1fr) auto auto auto auto auto;
    grid-template-areas: "handle swatch label opacity weight settings eye remove";
  }

  .designer[data-layout="tablet"] .dz-paint-row.is-stroke > .dz-stroke-weight {
    width: 64px;
  }
}

.dz-stroke-settings[aria-expanded="true"] {
  background: var(--dz-selected);
  color: var(--accent-ink);
}

/* The stroke settings popover (properties/stroke-settings.js): one labeled line per setting. */
.dz-pop.is-picker.is-stroke-settings {
  width: 300px;
}

.dz-stroke-pop-body {
  display: grid;
  gap: 8px;
  padding: 2px 12px 12px;
}

.dz-stroke-pop-body > .dz-prop-row > .dz-prop-label {
  width: 66px;
}

.dz-stroke-side-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-left: 74px;
}

.dz-stroke-fold-wrap {
  display: grid;
  gap: 6px;
}

.dz-stroke-fold {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 4px;
  min-height: var(--dz-h-sm);
  padding: 0 6px 0 2px;
  border: 0;
  border-radius: var(--dz-r-sm);
  background: transparent;
  color: var(--text-3);
  font-size: var(--dz-fs-sm);
  font-weight: 650;
  cursor: var(--nc-hand, pointer);
}

.dz-stroke-fold:hover {
  background: var(--dz-hover-bg);
  color: var(--text);
}

.dz-stroke-fold-chevron {
  transition: transform var(--dz-fast) var(--dz-ease);
}

.dz-stroke-fold.is-open .dz-stroke-fold-chevron {
  transform: rotate(90deg);
}

.dz-stroke-fold-body {
  padding-left: 74px;
}

/* On phones it is a bottom sheet: its own head (title and close) replaces the sheet's. */
.dz-sheet.is-stroke-settings .dz-sheet-head {
  display: none;
}

.designer[data-layout="phone"] .dz-stroke-fold {
  min-height: 44px;
}

@media (prefers-reduced-motion: reduce) {
  .dz-stroke-fold-chevron {
    transition: none;
  }
}

/* Drawing strokes (properties/stroke-art.js): the type in the popover's head, the brush picker, the wobble and the
   width profile. */
.dz-stroke-pop-head > .dz-stroke-type {
  flex: 1;
  min-width: 0;
  font-weight: 650;
}

.dz-stroke-art {
  display: grid;
  gap: 8px;
}

.dz-stroke-art > .dz-prop-row > .dz-prop-label {
  width: 66px;
}

.dz-stroke-art .dz-prop-controls > .dz-btn.is-icon {
  flex: none;
}

.dz-brush-pick {
  display: flex;
  align-items: center;
  gap: 6px;
  height: var(--dz-h);
  padding: 0 6px 0 2px;
  border: 0;
  border-radius: var(--dz-r-sm);
  background: var(--dz-field);
  color: var(--text);
  font: inherit;
  font-size: var(--dz-fs);
  font-weight: 600;
  text-align: left;
  cursor: var(--nc-hand, pointer);
}

.dz-brush-pick:hover,
.dz-brush-pick.is-open {
  background: var(--dz-field-hover);
}

.dz-brush-pick > .dz-brush-preview {
  flex: none;
  width: 54px;
  height: 21px;
}

.dz-brush-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dz-brush-chevron {
  flex: none;
  color: var(--text-3);
  transition: transform var(--dz-fast) var(--dz-ease);
}

.dz-brush-pick.is-open .dz-brush-chevron {
  transform: rotate(180deg);
}

.dz-brush-grid {
  display: grid;
  gap: 4px;
  max-height: 240px;
  overflow: auto;
  padding: 6px;
  border-radius: var(--dz-r-sm);
  background: var(--dz-field);
}

.dz-brush-group {
  margin: 2px 2px 0;
  color: var(--text-3);
  font-size: var(--dz-fs-sm);
  font-weight: 650;
}

.dz-brush-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 4px;
}

.dz-brush-cell {
  position: relative;
  display: grid;
}

.dz-brush-tile {
  display: grid;
  place-items: center;
  min-height: 34px;
  padding: 2px;
  border: 0;
  border-radius: var(--dz-r-sm);
  background: transparent;
  color: var(--text);
  cursor: var(--nc-hand, pointer);
}

.dz-brush-tile:hover {
  background: var(--dz-hover-bg);
}

.dz-brush-tile[aria-selected="true"] {
  background: var(--dz-selected);
  color: var(--accent-ink);
  box-shadow: 0 0 0 1px var(--accent-line) inset;
}

.dz-brush-tile > .dz-brush-preview {
  width: 72px;
  height: 28px;
}

.dz-brush-remove.dz-btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 18px;
  height: 18px;
  min-height: 0;
  padding: 0;
  opacity: 0;
}

.dz-brush-cell:hover > .dz-brush-remove,
.dz-brush-remove:focus-visible {
  opacity: 1;
}

.designer[data-layout="phone"] .dz-brush-tile {
  min-height: 44px;
}

.designer[data-layout="phone"] .dz-brush-remove.dz-btn {
  opacity: 1;
  width: 24px;
  height: 24px;
}

@media (prefers-reduced-motion: reduce) {
  .dz-brush-chevron {
    transition: none;
  }
}

/* Effects: a compact row (icon and name) that opens the effect's settings. */
.dz-effect-open {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--dz-h);
  padding: 0 8px;
  border: 0;
  border-radius: var(--dz-r-sm);
  background: var(--dz-field);
  color: var(--text);
  font-size: var(--dz-fs);
  font-weight: 600;
  text-align: left;
  cursor: var(--nc-hand, pointer);
  transition: background-color var(--dz-fast) var(--dz-ease), box-shadow var(--dz-fast) var(--dz-ease);
}

.dz-effect-open:hover {
  background: var(--dz-field-hover);
}

.dz-effect-open[aria-expanded="true"] {
  box-shadow: 0 0 0 1px var(--accent-line) inset;
}

.dz-effect-icon {
  flex: none;
  display: inline-flex;
  color: var(--text-2);
}

.dz-effect-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The effect's settings: its type, blend mode and close in the head, then one labeled line per setting. */
.dz-effect-head {
  justify-content: flex-start;
  gap: 4px;
}

.dz-effect-head > .dz-effect-type {
  flex: 1;
  min-width: 0;
  font-weight: 650;
}

.dz-effect-head > .dz-btn[aria-pressed="true"] {
  color: var(--accent);
}

.dz-effect-body {
  display: grid;
  gap: 8px;
  padding: 2px 12px 12px;
}

.dz-effect-body .dz-prop-label {
  width: 62px;
}

.dz-effect-body .dz-prop-controls > .dz-swatch,
.dz-effect-body .dz-prop-controls > .dz-number.is-compact {
  flex: none;
}

.dz-effect-body .dz-prop-controls > .dz-number.is-compact {
  width: 58px;
}

.dz-effect-body .dz-paint-hex {
  min-width: 0;
}

.dz-effect-check {
  min-height: 28px;
}

/* Glass under a fill that hides it: a short note and a fix. */
.dz-effect-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 28px;
  color: var(--text-3);
  font-size: var(--dz-fs-sm);
}

.dz-effect-note[hidden] {
  display: none;
}

.dz-effect-body .dz-prop-row.is-disabled,
.dz-effect-body .dz-prop-row:has(.dz-number.is-disabled) .dz-prop-label {
  opacity: 0.55;
}

.dz-sheet .dz-effect-body {
  gap: 10px;
  padding: 2px 8px 12px;
}

/* On phones the effect's own head (its type, blend mode, close) is the sheet's title. */
.dz-sheet.is-effect > .dz-sheet-head {
  display: none;
}

.dz-sheet .dz-effect-head {
  position: static;
  padding: 4px 8px 10px;
}

/* A color or paint swatch over a checkerboard. */
.dz-swatch {
  flex: none;
  position: relative;
  width: var(--dz-h);
  height: var(--dz-h);
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--dz-r-sm);
  background: var(--dz-checker);
  box-shadow: 0 0 0 1px rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.14) inset;
  cursor: var(--nc-hand, pointer);
}

.dz-swatch-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--swatch, transparent);
  box-shadow: 0 0 0 1px rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.12) inset;
}

.dz-swatch:hover .dz-swatch-fill {
  box-shadow: 0 0 0 1px rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.35) inset;
}

.dz-swatch.is-mixed .dz-swatch-fill {
  background: linear-gradient(135deg, transparent 46%, rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.5) 46% 54%, transparent 54%);
}

.dz-swatch.is-image .dz-swatch-fill {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23f5f3f9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='13' height='13' rx='2'/%3E%3Cpath d='m3.8 13.6 3.3-3.3a1.2 1.2 0 0 1 1.7 0l5.8 5.8'/%3E%3C/svg%3E") center / 16px no-repeat,
    rgba(124, 199, 255, 0.25);
}

/* Pattern and video fills (paint-picker.js): their swatch marks. */
.dz-swatch.is-pattern .dz-swatch-fill {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23f5f3f9'%3E%3Ccircle cx='6.5' cy='6.5' r='1.8'/%3E%3Ccircle cx='13.5' cy='6.5' r='1.8'/%3E%3Ccircle cx='6.5' cy='13.5' r='1.8'/%3E%3Ccircle cx='13.5' cy='13.5' r='1.8'/%3E%3C/svg%3E") center / 16px no-repeat,
    rgba(var(--dzt-accent-rgb, 255, 92, 168), 0.22);
}

.dz-swatch.is-video .dz-swatch-fill {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23f5f3f9' stroke-width='1.5' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='15' height='11' rx='2'/%3E%3Cpath d='M8.4 7.7v4.6l4.4-2.3z' fill='%23f5f3f9'/%3E%3C/svg%3E") center / 16px no-repeat,
    rgba(124, 199, 255, 0.25);
}

/* Style links. */
.dz-style-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--dz-h);
  padding: 2px 2px 2px 2px;
  border: 1px solid rgba(var(--dzt-violet-rgb, 185, 140, 255), 0.28);
  border-radius: var(--dz-r);
  background: rgba(var(--dzt-violet-rgb, 185, 140, 255), 0.07);
}

.dz-style-chip .dz-swatch {
  width: 22px;
  height: 22px;
}

.dz-style-chip-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dz-styles-button .dz-icon {
  transform: rotate(90deg);
}

.dz-style-list {
  display: grid;
  gap: 1px;
}

.dz-style-row {
  display: flex;
  align-items: center;
  gap: 2px;
  border-radius: 7px;
}

.dz-style-row:hover {
  background: var(--dz-hover-bg);
}

.dz-style-row.is-active {
  background: var(--dz-selected);
}

.dz-style-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 6px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: var(--nc-hand, pointer);
}

.dz-style-swatch {
  flex: none;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: var(--swatch, transparent), var(--dz-checker);
  box-shadow: 0 0 0 1px rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.16) inset;
  color: var(--text-2);
  font: 700 10px/1 var(--font-body);
}

.dz-style-swatch.is-text,
.dz-style-swatch.is-effect {
  background: rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.05);
}

.dz-style-swatch .dz-icon {
  width: 12px;
  height: 12px;
}

.dz-style-row-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dz-style-row-meta {
  color: var(--text-3);
  font-size: 10.5px;
  white-space: nowrap;
}

.dz-local-styles {
  display: grid;
  gap: 6px;
}

.dz-style-editor {
  display: grid;
  gap: 8px;
  padding: 0 12px 12px;
}

/* Text section. */
.dz-text-value {
  min-height: 56px;
  font-size: 12.5px;
}

.dz-font-button {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: var(--dz-h);
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--dz-r-sm);
  background: var(--dz-field);
  color: var(--text);
  text-align: left;
  cursor: var(--nc-hand, pointer);
}

.dz-font-button:hover {
  background: var(--dz-field-hover);
}

.dz-font-button-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dz-font-note {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: -2px;
}

.dz-font-note[hidden] {
  display: none;
}

.dz-font-note .dz-icon {
  flex: none;
  color: var(--text-3);
}

/* Image section. */
.dz-image-picture {
  display: flex;
  gap: 10px;
}

.dz-image-preview {
  flex: none;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--dz-checker);
  box-shadow: 0 0 0 1px rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.1) inset;
  color: var(--text-3);
}

.dz-image-thumb {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.dz-image-info {
  flex: 1;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 2px;
}

.dz-image-name {
  overflow: hidden;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dz-image-meta {
  color: var(--text-3);
  font-size: var(--dz-fs-sm);
}

.dz-image-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.dz-asset-pick {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 6px;
  padding: 0 12px 12px;
}

.dz-asset-option {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 3px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--dz-checker);
  cursor: var(--nc-hand, pointer);
}

.dz-asset-option img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.dz-asset-option:hover {
  border-color: var(--dz-line-strong);
}

.dz-asset-option[aria-selected="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(var(--dzt-accent-rgb, 255, 92, 168), 0.25);
}

/* A shader fill in the paint picker: the ready-made fills as small previews, then the chosen one's settings (a
   color's picker opens right under its line). */
.dz-pop.is-picker:has(.dz-shader-paint) {
  width: 304px;
}

.dz-shader-paint {
  display: grid;
  gap: 8px;
  padding-bottom: 12px;
}

.dz-shader-paint > .dz-prop-row,
.dz-shader-paint > .dz-shader-color,
.dz-shader-paint > .dz-hint {
  margin: 0 12px;
}

.dz-shader-paint .dz-prop-label {
  width: 78px;
}

.dz-shader-paint .dz-prop-controls > .dz-swatch,
.dz-shader-paint .dz-prop-controls > .dz-number.is-compact {
  flex: none;
}

.dz-shader-paint .dz-prop-controls > .dz-number.is-compact {
  width: 58px;
}

.dz-shader-paint .dz-paint-hex {
  min-width: 0;
}

.dz-shader-pick {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 0 12px 4px;
}

.dz-shader-option {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 4px;
  min-width: 0;
  padding: 3px 3px 4px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  color: var(--text-2);
  font: inherit;
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
  cursor: var(--nc-hand, pointer);
}

.dz-shader-option:hover {
  border-color: var(--dz-line-strong);
}

.dz-shader-option[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(var(--dzt-accent-rgb, 255, 92, 168), 0.25);
  color: var(--text);
}

.dz-shader-preview {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 6px;
  background: var(--preview, transparent);
  box-shadow: 0 0 0 1px rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.12) inset;
}

.dz-shader-name {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* The paint picker's head, like other design tools: the title, the blend button and close on its first row, the
   paint kinds (icons, their names as tips) on a row of their own under it, across the whole width, so every kind
   fits at any width and the first row's empty part is there to move the popover. A long title (a style's name)
   stays on one line, cut short. Phones' sheets have their own rules below. */
.dz-picker.is-paint > .dz-picker-head > .dz-picker-title {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dz-pop .dz-picker.is-paint > .dz-picker-head {
  flex-wrap: wrap;
  row-gap: 8px;
}

.dz-pop .dz-picker.is-paint > .dz-picker-head > .dz-seg {
  order: 1;
  flex: 1 0 100%;
}

/* In a phone's sheet six kinds (44 px each), the blend button and close don't fit one row: the kinds take a row of
   their own, under the blend button and close. */
.dz-sheet .dz-picker.is-paint > .dz-picker-head:has(> .dz-seg > button:nth-child(6)) > .dz-seg {
  order: 1;
  flex: 1 0 100%;
}

.dz-sheet .dz-picker.is-paint > .dz-picker-head:has(> .dz-seg > button:nth-child(6)) > .dz-paint-blend {
  margin-left: auto;
}

.dz-image-paint {
  display: grid;
  gap: 8px;
  padding-bottom: 12px;
}

.dz-image-paint > :not(.dz-asset-pick) {
  margin: 0 12px;
}

/* A picture's settings (image-settings.js): the image fill popover and the Image section's Adjust popover. Labels
   on the left, controls on the right; the seven adjustments as sliders centered on 0, each with its number. */
.dz-pop.is-picker:has(.dz-image-settings) {
  width: 304px;
}

.dz-picker-head .dz-picker-close {
  flex: none;
  margin: -2px -4px -2px 0;
}

.dz-image-settings > .dz-prop-row,
.dz-image-settings > .dz-adjust {
  margin: 0 12px;
}

.dz-image-settings .dz-prop-label {
  width: 78px;
}

.dz-image-picture.is-compact .dz-image-preview {
  width: 44px;
  height: 44px;
  border-radius: 8px;
}

/* A 3D view's lights (ui/properties/viewport.js): the value next to its swatch, quiet while Studio's own is used. */
.dz-viewport-light > .dz-swatch,
.dz-viewport-light > .dz-btn {
  flex: none;
}

.dz-viewport-value {
  overflow: hidden;
  color: var(--text-3);
  font-size: var(--dz-fs-sm);
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dz-viewport-value.is-set {
  color: var(--text-2);
}

.dz-number.is-default .dz-number-input {
  color: var(--text-3);
}

/* The Frame tool's "Add 3D view" (ui/frame-sizes.js), under the Roblox screen sizes. */
.dz-frames-viewport {
  justify-self: start;
  margin: 4px 0 0;
}

/* A pattern fill's settings (pattern-editor.js): the source button (the layer's name, its menu), the two spacing
   fields side by side, a short note when the source can't be used. */
.dz-pattern-source {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-start;
  gap: 6px;
}

.dz-pattern-source-icon {
  display: inline-grid;
  flex: none;
  color: var(--text-2);
}

.dz-pattern-source-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dz-pattern-spacing .dz-prop-controls > .dz-number {
  flex: 1 1 0;
  min-width: 0;
}

.dz-image-settings > .dz-pattern-hint {
  margin: -4px 12px 0;
}

/* A video fill's settings (video-editor.js): play on the canvas, the poster frame's slider and its time. */
.dz-video-poster {
  flex: 1 1 auto;
  min-width: 0;
  accent-color: var(--accent);
}

.dz-video-time {
  flex: none;
  min-width: 42px;
  color: var(--text-2);
  font: 500 11.5px/1 var(--font-mono);
  text-align: right;
}

.dz-asset-option {
  position: relative;
}

.dz-asset-option-mark {
  position: absolute;
  right: 4px;
  bottom: 4px;
  display: grid;
  color: #f5f3f9;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
  pointer-events: none;
}

/* Picking a pattern's source on the canvas. */
.designer-canvas-host.is-picking-source,
.designer-canvas-host.is-picking-source * {
  cursor: crosshair !important;
}

@media (pointer: coarse) {
  .dz-video-poster {
    min-height: 44px;
  }
}

.dz-picture-buttons {
  display: flex;
  align-items: center;
  gap: 2px;
}

.dz-prop-controls > .dz-picture-buttons {
  flex: none;
}

.dz-adjust {
  display: grid;
  gap: 2px;
  padding-top: 4px;
}

.dz-adjust-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--dz-h-sm);
  margin-bottom: 2px;
}

.dz-adjust-foot {
  display: flex;
  justify-content: flex-end;
  padding: 4px 0 10px;
}

.dz-adjust-row {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 8px;
  min-height: var(--dz-h);
}

.dz-adjust-label {
  overflow: hidden;
  color: var(--text-3);
  font-size: var(--dz-fs-sm);
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dz-adjust-row:hover .dz-adjust-label {
  color: var(--text-2);
}

.dz-adjust-number.is-compact {
  width: 48px;
}

.dz-adjust-number .dz-number-input {
  padding: 0 6px 0 2px;
  text-align: right;
}

/* The slider: a thin line with a mark at 0, the part from 0 to the value lit, a round knob. */
.dz-adjust-track {
  --adjust: 0.5;
  position: relative;
  height: 18px;
  border-radius: 999px;
  cursor: var(--nc-hand, pointer);
  touch-action: none;
}

.dz-adjust-track::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 999px;
  background: rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.14);
}

.dz-adjust-zero {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 9px;
  margin: -4.5px 0 0 -1px;
  border-radius: 1px;
  background: rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.32);
}

.dz-adjust-fill {
  position: absolute;
  top: 50%;
  left: calc(min(var(--adjust), 0.5) * 100%);
  width: calc(max(var(--adjust) - 0.5, 0.5 - var(--adjust)) * 100%);
  height: 3px;
  margin-top: -1.5px;
  border-radius: 999px;
  background: var(--accent);
}

.dz-adjust-knob {
  position: absolute;
  top: 50%;
  left: calc(var(--adjust) * 100%);
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: var(--dz-surface-strong);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 2px 5px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

.dz-adjust-track.is-set .dz-adjust-knob {
  background: var(--accent);
}

.dz-adjust-track:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.dz-adjust-controls {
  gap: 4px;
}

.dz-prop-controls.dz-adjust-controls > * {
  flex: none;
}

.dz-adjust-note {
  min-width: 18px;
  padding: 2px 5px;
  border-radius: 999px;
  background: var(--dz-selected);
  color: var(--accent-ink);
  font: 700 10.5px/1.2 var(--font-body);
  text-align: center;
}

.dz-prop-controls.dz-scale-type > .dz-picture-buttons {
  flex: none;
}

/* As a bottom sheet (phones) the settings keep their own title and close button, so the sheet's title is not
   shown twice. */
.dz-sheet:is(.is-image-settings, :has(.dz-image-settings)) > .dz-sheet-head {
  display: none;
}

/* Fingers: taller sliders and rows. */
.designer[data-layout="phone"] .dz-adjust-row {
  grid-template-columns: 86px minmax(0, 1fr) 64px;
  min-height: 44px;
}

.designer[data-layout="phone"] .dz-adjust-number.is-compact {
  width: 64px;
}

.designer[data-layout="phone"] .dz-adjust-track {
  height: 32px;
}

.designer[data-layout="phone"] .dz-adjust-knob {
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
}

.designer[data-layout="phone"] .dz-image-settings .dz-prop-label {
  width: 86px;
}

/* Instance and component sections. */
.dz-component-name {
  color: var(--dz-component);
  font-weight: 700;
}

/* Variants and component properties: an instance's values, a set's or main's properties, a variant's values. */
.dz-component-props,
.dz-variant-values,
.dz-link-rows {
  display: grid;
  gap: 6px;
}

.dz-component-props[hidden] {
  display: none;
}

.dz-prop-defs {
  display: grid;
  gap: 10px;
}

.dz-prop-def {
  display: grid;
  gap: 6px;
}

.dz-prop-def-head {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.dz-prop-def-head > .dz-input {
  flex: 1;
  min-width: 0;
}

.dz-prop-def-head > .dz-switch {
  flex: none;
}

.dz-prop-def-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: rgba(var(--dzt-violet-rgb, 185, 140, 255), 0.12);
  color: var(--dz-component);
}

.dz-prop-def-value,
.dz-value-chips {
  padding-left: 30px;
}

.dz-value-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.dz-value-chip {
  max-width: 100%;
  min-height: 26px;
  padding: 0 9px;
  overflow: hidden;
  border: 1px solid var(--dz-line);
  border-radius: 999px;
  background: rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.03);
  color: var(--text-2);
  font-size: var(--dz-fs-sm);
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: var(--nc-hand, pointer);
  transition: background-color var(--dz-fast) var(--dz-ease), border-color var(--dz-fast) var(--dz-ease), color var(--dz-fast) var(--dz-ease);
}

.dz-value-chip:hover {
  border-color: rgba(var(--dzt-violet-rgb, 185, 140, 255), 0.45);
  background: rgba(var(--dzt-violet-rgb, 185, 140, 255), 0.1);
  color: var(--text);
}

.designer[data-layout="phone"] .dz-value-chip {
  min-height: 44px;
  padding: 0 14px;
}

/* Changes on instances one by one, slots, preferred components, exposed properties (d-components). */
.dz-changes-open {
  justify-self: start;
  max-width: 100%;
  gap: 4px;
  padding-left: 0;
  color: var(--text-2);
  font-weight: 550;
}

.dz-changes-open > svg {
  flex: none;
  opacity: 0.6;
}

.dz-changes-open:hover {
  color: var(--text);
}

.dz-changes-list {
  display: grid;
  gap: 1px;
  max-height: 280px;
  padding: 0 6px 4px;
  overflow: auto;
}

.dz-changes-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 0 0 6px;
  border-radius: 8px;
}

.dz-changes-row:hover {
  background: rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.04);
}

.dz-changes-what,
.dz-changes-where {
  overflow: hidden;
  font-size: var(--dz-fs-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dz-changes-what {
  color: var(--text);
  font-weight: 650;
}

.dz-changes-where {
  color: var(--text-3);
}

.dz-picker > .dz-changes-note {
  margin: 0;
}

.designer[data-layout="phone"] :is(.dz-changes-row, .dz-changes-open) {
  min-height: 44px;
}

.designer[data-layout="phone"] .dz-changes-reset {
  width: 44px;
  height: 44px;
}

/* Slots on an instance, the properties of exposed nested instances, preferred components. */
.dz-slot-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.dz-slot-count {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--text-2);
  font-size: var(--dz-fs-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dz-exposed {
  display: grid;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--dz-line);
}

.dz-exposed-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding-left: calc(var(--depth, 0) * 12px);
  color: var(--text-2);
  font-size: var(--dz-fs-sm);
  font-weight: 650;
}

.dz-exposed-head > svg {
  flex: none;
  color: var(--dz-component);
}

.dz-preferred-button[aria-pressed="true"] {
  color: var(--dz-component);
}

.dz-preferred-list {
  display: grid;
  gap: 2px;
  max-height: 280px;
  padding: 0 12px 12px;
  overflow: auto;
}

.designer[data-layout="phone"] .dz-preferred-list > .dz-check {
  min-height: 44px;
}

/* Check designs: a floating window (a sheet on phones) with what does not use the styles and variables yet. */
.dz-check-entry {
  padding: 4px 12px 12px;
}

.dz-check-open {
  color: var(--text-2);
}

.dz-check-window {
  position: fixed;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: var(--dz-check-w, 360px);
  height: var(--dz-check-h, 480px);
  max-width: calc(100vw - 16px);
  max-height: calc(100dvh - 16px);
  overflow: hidden;
  border: 1px solid var(--glass-border-hover);
  border-radius: var(--radius-lg);
  background: var(--dz-surface-strong);
  -webkit-backdrop-filter: var(--dz-blur);
  backdrop-filter: var(--dz-blur);
  box-shadow: var(--dz-shadow-pop);
  outline: none;
}

/* On phones it fills its sheet: the list scrolls, the foot stays at the bottom. */
.dz-check-window.is-phone {
  position: static;
  width: auto;
  height: 100%;
  max-width: none;
  max-height: none;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.dz-check-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 10px 14px;
  border-bottom: 1px solid var(--dz-line);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.dz-check-window.is-phone .dz-check-head {
  padding: 0 0 10px;
  cursor: var(--nc-arrow, default);
}

.dz-check-head:active {
  cursor: grabbing;
}

.dz-check-title {
  flex: 1;
  min-width: 0;
  font: 650 13.5px/1.2 var(--font-display);
}

.dz-check-scope {
  flex: none;
  height: 28px;
}

.dz-check-scope > button {
  flex: none;
  padding: 0 10px;
}

.dz-check-list {
  flex: 1;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 2px;
  padding: 6px 8px;
  overflow: auto;
}

.dz-check-group {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 4px 2px;
  color: var(--text-3);
  font-size: var(--dz-fs-sm);
  font-weight: 650;
}

.dz-check-group:first-child {
  margin-top: 2px;
}

.dz-check-count {
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.06);
  color: var(--text-2);
}

.dz-check-item {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  border-radius: 8px;
}

.dz-check-item:hover {
  background: rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.04);
}

.dz-check-row {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 40px;
  padding: 4px 6px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: var(--nc-hand, pointer);
}

.dz-check-row:focus-visible {
  outline: 2px solid var(--accent-line);
  outline-offset: -2px;
}

.dz-check-swatch,
.dz-check-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
}

.dz-check-swatch {
  border: 1px solid rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.18);
  background: var(--swatch, transparent);
}

.dz-check-icon {
  background: rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.06);
  color: var(--text-2);
}

.dz-check-text {
  display: grid;
  min-width: 0;
}

.dz-check-what,
.dz-check-where {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dz-check-what {
  color: var(--text);
  font-size: var(--dz-fs-sm);
  font-weight: 600;
}

.dz-check-where {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-3);
  font-size: 11px;
}

.dz-check-where > svg {
  flex: none;
}

.dz-check-fix {
  flex: none;
}

.dz-check-ignore {
  flex: none;
  opacity: 0.6;
}

.dz-check-item:hover .dz-check-ignore,
.dz-check-ignore:focus-visible {
  opacity: 1;
}

.dz-check-empty {
  padding: 32px 12px;
}

.dz-check-foot {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--dz-line);
}

.dz-check-summary {
  margin: 0;
  color: var(--text-2);
  font-size: var(--dz-fs-sm);
}

.designer[data-layout="phone"] :is(.dz-check-row, .dz-check-fix, .dz-check-ignore) {
  min-height: 44px;
}

.designer[data-layout="phone"] .dz-check-ignore {
  width: 44px;
  opacity: 1;
}

/* A variable's settings: where it shows, and its names in code. */
.dz-var-settings {
  display: grid;
  gap: 6px;
  padding: 0 12px 12px;
}

.dz-var-settings > .dz-subhead {
  margin: 4px 0 0;
}

.dz-var-scopes {
  display: grid;
  gap: 2px;
}

.dz-var-scopes > .dz-check:first-child {
  padding-bottom: 4px;
  border-bottom: 1px solid var(--dz-line);
  margin-bottom: 2px;
}

.dz-var-code-input {
  font-family: var(--font-mono);
  font-size: var(--dz-fs-sm);
}

.designer[data-layout="phone"] .dz-var-scopes > .dz-check {
  min-height: 44px;
}

/* Roblox tab. */
.dz-roblox-tab {
  display: grid;
}

.dz-roblox-empty {
  display: grid;
  gap: 10px;
  padding-bottom: 12px;
}

.dz-roblox-empty .dz-button-row {
  padding: 0 12px;
}

.dz-export-status {
  display: grid;
  gap: 6px;
}

.dz-export-line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid var(--ok-line);
  border-radius: var(--dz-r);
  background: var(--ok-soft);
  color: var(--text);
  font-weight: 650;
}

.dz-export-line .dz-icon {
  color: var(--ok);
}

.dz-export-line[data-tone="warn"] {
  border-color: var(--warn-line);
  background: var(--warn-soft);
}

.dz-export-line[data-tone="warn"] .dz-icon {
  color: var(--warn);
}

.dz-reasons {
  display: grid;
  gap: 3px;
  padding-left: 18px;
  color: var(--text-2);
  font-size: var(--dz-fs-sm);
  list-style: disc;
}

.dz-instances {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.dz-instances .dz-prop-label {
  width: auto;
  margin-right: 4px;
}

.dz-instance {
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.06);
  color: var(--text-2);
  font: 500 10.5px/1.4 var(--font-mono);
}

.dz-kv-list {
  display: grid;
  gap: 4px;
}

.dz-kv-row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) 92px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 4px;
}

.dz-kv-row.is-invalid .dz-kv-name {
  color: var(--dz-danger-ink);
}

.dz-kv-name {
  overflow: hidden;
  color: var(--text);
  font: 500 11px/1 var(--font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dz-kv-value {
  font-family: var(--font-mono);
  font-size: 11px;
}

.dz-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.dz-tags:empty {
  display: none;
}

.dz-tag {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 24px;
  padding: 0 0 0 9px;
  border: 1px solid var(--dz-line-strong);
  border-radius: 999px;
  background: rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.04);
  font-size: var(--dz-fs-sm);
  font-weight: 650;
}

.dz-tag .dz-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
}

.dz-page-view {
  display: grid;
}

/* "Your file is ready" (iPhone and iPad save from a tap). */
.dz-save-offer {
  display: grid;
  gap: 12px;
}

.dz-save-offer-name {
  overflow-wrap: anywhere;
  color: var(--text);
  font: 600 13px/1.4 var(--font-body);
}

.dz-save-offer .dz-btn {
  height: 44px;
  padding: 0 16px;
}

/* Export presets. */
.dz-export-list {
  display: grid;
  gap: 4px;
}

.dz-export-row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) 68px var(--dz-h-sm) var(--dz-h-sm);
  align-items: center;
  gap: 4px;
}

/* The "..." of a preset whose settings differ from the defaults. */
.dz-export-more.is-active {
  color: var(--accent);
}

/* A preset's settings (the popover behind "...", a sheet on phones; also the export window's options). */
.dz-pop.is-export-settings {
  width: 252px;
}

.dz-export-settings {
  display: grid;
  gap: 12px;
  padding: 12px;
}

.dz-sheet .dz-export-settings {
  padding: 4px 16px 16px;
}

/* Under the popover's title row. */
.dz-export-settings-pop > .dz-export-settings {
  padding-top: 2px;
}

.dz-export-setting {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.dz-export-setting-label {
  color: var(--text-3);
  font-size: 11.5px;
  font-weight: 600;
}

.dz-export-setting > .dz-seg {
  display: flex;
  width: 100%;
}

.dz-export-quality {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.dz-export-quality-range {
  flex: 1 1 auto;
  min-width: 0;
  accent-color: var(--accent);
}

.dz-export-quality-value {
  min-width: 40px;
  color: var(--text-2);
  font: 500 11.5px/1 var(--font-mono);
  text-align: right;
}

@media (pointer: coarse) {
  .dz-export-setting > .dz-seg,
  .dz-export-setting.is-toggle > .dz-check,
  .dz-export-quality-range {
    min-height: 44px;
  }
}

.dz-export-size {
  font: 500 11.5px/1 var(--font-mono);
}

.dz-export-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dz-export-run {
  flex: 1;
  min-width: 0;
  justify-content: flex-start;
}

.dz-export-run-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dz-export-status:empty {
  display: none;
}

.dz-export-preview {
  display: grid;
  justify-items: center;
  gap: 4px;
  margin: 2px 0 0;
  padding: 8px;
  border-radius: var(--dz-r);
  background: var(--dz-checker);
  box-shadow: 0 0 0 1px rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.08) inset;
}

.dz-export-preview-image {
  max-width: 100%;
  max-height: 132px;
  object-fit: contain;
}

.dz-export-preview figcaption {
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(var(--dzt-well-rgb, 8, 7, 11), 0.7);
  color: var(--text-2);
  font: 500 10.5px/1.4 var(--font-mono);
}

/* ---------- variables (ui/variables/*): bind buttons, chips, modes, the picker and the Variables window ---------- */
/* The small hexagon on a field that can follow a variable: shown when the pointer is over the field or it has the
   keyboard (always on touch screens, which have no pointer over anything). */
.dz-var-bind {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-right: 2px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-3);
  cursor: var(--nc-hand, pointer);
  opacity: 0;
  transition: opacity var(--dz-fast) var(--dz-ease), background-color var(--dz-fast) var(--dz-ease), color var(--dz-fast) var(--dz-ease);
}

.dz-var-bind:hover {
  background: var(--dz-press);
  color: var(--text);
}

.dz-var-bind:focus-visible,
.has-var:hover > .dz-var-bind,
.has-var:focus-within > .dz-var-bind,
.dz-section-head:hover .dz-var-bind,
.dz-section-head:focus-within .dz-var-bind,
.dz-var-field:hover > .dz-var-bind,
.dz-var-field:focus-within > .dz-var-bind {
  opacity: 1;
}

.dz-var-bind[hidden] {
  display: none;
}

/* A number field that follows a variable shows the chip where the number was. */
.dz-number.is-bound > .dz-number-input,
.dz-number.is-bound > .dz-number-unit {
  display: none;
}

.dz-number.is-bound > .dz-number-label {
  pointer-events: none;
}

.dz-var-chip {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  height: calc(var(--dz-h) - 6px);
  margin: 0 3px 0 1px;
  border-radius: 5px;
  background: rgba(var(--dzt-violet-rgb, 185, 140, 255), 0.14);
  box-shadow: 0 0 0 1px rgba(var(--dzt-violet-rgb, 185, 140, 255), 0.3) inset;
  color: var(--text);
}

.dz-var-chip[hidden] {
  display: none;
}

.dz-var-chip-name {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 100%;
  padding: 0 4px 0 6px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: inherit;
  font: 600 11.5px/1 var(--font-body);
  text-align: left;
  cursor: var(--nc-hand, pointer);
}

.dz-var-chip-name:hover {
  background: rgba(var(--dzt-violet-rgb, 185, 140, 255), 0.12);
}

.dz-var-chip-icon {
  flex: none;
  display: none;
  width: 12px;
  height: 12px;
  color: var(--dzt-violet-ink, #c9a8ff);
}

.dz-var-chip.is-wide .dz-var-chip-icon {
  display: block;
}

.dz-var-chip-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Detach shows where the pointer or the keyboard is (always on touch screens), so the name has the room. */
.dz-var-chip-detach {
  flex: none;
  display: none;
  place-items: center;
  width: 20px;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-3);
  cursor: var(--nc-hand, pointer);
}

.dz-var-chip-detach .dz-icon {
  width: 13px;
  height: 13px;
}

.dz-var-chip-detach:hover {
  background: rgba(var(--dzt-violet-rgb, 185, 140, 255), 0.16);
  color: var(--text);
}

.dz-var-chip:hover > .dz-var-chip-detach,
.dz-var-chip:focus-within > .dz-var-chip-detach,
.dz-var-chip.is-wide > .dz-var-chip-detach {
  display: grid;
}

.dz-paint-label > .dz-var-chip,
.dz-var-slot > .dz-var-chip,
.dz-var-line .dz-var-chip {
  height: var(--dz-h);
  margin: 0;
}

.dz-var-slot {
  flex: 1;
  min-width: 0;
  display: flex;
}

.dz-var-slot:empty {
  flex: 1;
}

.dz-paint-row.is-bound .dz-swatch,
.dz-shadow-color.is-bound .dz-swatch {
  box-shadow: 0 0 0 1px rgba(var(--dzt-violet-rgb, 185, 140, 255), 0.55) inset;
}

/* The words of a text layer: the chip (with a peek at the words) instead of the box. */
.dz-var-field {
  position: relative;
}

.dz-var-field > .dz-var-bind.is-corner {
  position: absolute;
  top: 4px;
  right: 4px;
}

.dz-var-chip.is-wide {
  height: auto;
  min-height: var(--dz-h);
  flex-wrap: wrap;
  margin: 0;
  padding-bottom: 6px;
}

.dz-var-chip.is-wide > .dz-var-chip-name {
  height: var(--dz-h);
}

.dz-var-text-preview {
  flex-basis: 100%;
  padding: 0 8px;
  overflow: hidden;
  color: var(--text-2);
  font-size: 11.5px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: pre-wrap;
}

.dz-var-line,
.dz-var-mode-row {
  min-height: var(--dz-h);
}

.dz-var-modes {
  display: grid;
  gap: 4px;
}

.dz-var-modes:empty {
  display: none;
}

.dz-var-open-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.dz-var-count {
  color: var(--text-3);
  font-size: var(--dz-fs-sm);
}

/* The picker: values on the left, names, the one in use ticked. */
.dz-pop.is-picker:has(.dz-picker.is-variables) {
  width: 280px;
}

.dz-var-search-row {
  padding: 0 12px 8px;
}

.dz-var-list {
  display: grid;
  gap: 1px;
  padding: 0 6px 8px;
}

.dz-var-list-head {
  padding: 8px 8px 4px;
  color: var(--text-3);
  font: 700 10.5px/1.2 var(--font-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dz-var-list-group {
  padding: 6px 8px 2px;
  color: var(--text-3);
  font-size: var(--dz-fs-sm);
}

.dz-var-option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  font-size: var(--dz-fs);
  text-align: left;
  cursor: var(--nc-hand, pointer);
}

.dz-var-option.is-grouped {
  padding-left: 14px;
}

.dz-var-option:hover,
.dz-var-option.is-active {
  background: var(--dz-hover-bg);
}

.dz-var-option[aria-selected="true"] {
  background: var(--dz-selected);
}

.dz-var-option-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dz-var-check {
  flex: none;
  color: var(--accent);
}

.dz-var-swatch {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: linear-gradient(var(--swatch, transparent), var(--swatch, transparent)), var(--dz-checker);
  box-shadow: 0 0 0 1px rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.18) inset;
}

.dz-var-value {
  flex: none;
  max-width: 76px;
  min-width: 22px;
  overflow: hidden;
  color: var(--text-3);
  font: 500 11px/1 var(--font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dz-var-empty {
  padding: 8px 8px 4px;
}

/* The Variables window: floats over the canvas (a sheet on phones). */
.dz-var-window {
  --dz-var-modes: 1;
  position: fixed;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: var(--dz-var-w, 760px);
  height: var(--dz-var-h, 520px);
  max-width: calc(100vw - 16px);
  max-height: calc(100dvh - 16px);
  overflow: hidden;
  border: 1px solid var(--glass-border-hover);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(var(--dzt-violet-rgb, 185, 140, 255), calc(0.06 * var(--dzt-glow, 1))), transparent 60%),
    var(--dz-surface-strong);
  -webkit-backdrop-filter: var(--dz-blur);
  backdrop-filter: var(--dz-blur);
  box-shadow: var(--dz-shadow-pop);
  outline: none;
}

.dz-var-window.is-phone {
  position: static;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.dz-var-window-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 16px;
  border-bottom: 1px solid var(--dz-line);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.dz-var-window-head:active {
  cursor: grabbing;
}

.dz-var-window-title {
  flex: 1;
  font: 650 13.5px/1.2 var(--font-display);
}

.dz-var-window-head .dz-var-search {
  width: 200px;
}

.dz-var-window-body {
  flex: 1;
  min-height: 0;
  display: flex;
}

.dz-var-side {
  flex: none;
  width: 176px;
  overflow: auto;
  padding: 8px 6px;
  border-right: 1px solid var(--dz-line);
  scrollbar-width: thin;
}

.dz-var-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 28px;
  padding: 0 4px 0 8px;
  color: var(--text-3);
  font: 700 10.5px/1.2 var(--font-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dz-var-side-head:not(:first-child) {
  margin-top: 10px;
}

.dz-var-collections,
.dz-var-groups {
  display: grid;
  gap: 1px;
}

.dz-var-side-row {
  display: flex;
  align-items: center;
  border-radius: 7px;
}

.dz-var-side-row:hover {
  background: var(--dz-hover-bg);
}

.dz-var-side-item {
  flex: 1;
  min-width: 0;
  height: 28px;
  padding: 0 8px 0 calc(8px + var(--depth, 0) * 12px);
  overflow: hidden;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-2);
  font: 600 var(--dz-fs) / 1 var(--font-body);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: var(--nc-hand, pointer);
}

.dz-var-side-item[aria-current="true"] {
  background: var(--dz-selected);
  color: var(--text);
}

.dz-var-side-more {
  opacity: 0;
}

.dz-var-side-row:hover .dz-var-side-more,
.dz-var-side-more:focus-visible {
  opacity: 1;
}

.dz-var-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.dz-var-phonebar {
  display: flex;
  gap: 6px;
  padding: 0 10px 8px;
}

.dz-var-phonebar[hidden] {
  display: none;
}

.dz-var-phonebar > .dz-select {
  flex: 1;
  min-width: 0;
}

/* A phone shows one mode at a time: the table fits the screen. */
.dz-var-window.is-phone .dz-var-table {
  --dz-var-columns: minmax(0, 1.1fr) minmax(0, 1fr) 40px;
  min-width: 0;
}

.dz-var-table-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.dz-var-table {
  --dz-var-columns: minmax(150px, 1.25fr) repeat(var(--dz-var-modes), minmax(150px, 1fr)) 34px;
  min-width: calc(220px + var(--dz-var-modes) * 150px);
}

.dz-var-row {
  display: grid;
  grid-template-columns: var(--dz-var-columns);
  align-items: center;
  min-height: 36px;
  border-bottom: 1px solid var(--dz-line);
  transform: translateY(var(--drag-y, 0));
}

.dz-var-row.is-head {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: 34px;
  background: var(--dz-surface-solid);
  color: var(--text-3);
  font: 650 11px/1 var(--font-body);
}

.dz-var-row:not(.is-head):hover {
  background: rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.025);
}

.dz-var-row.is-selected {
  background: var(--dz-in-selection);
}

.dz-var-row.is-dragging {
  z-index: 3;
  background: var(--dz-surface-strong);
  box-shadow: var(--dz-shadow-pop);
}

.dz-var-row.is-drop-before {
  box-shadow: 0 -2px 0 var(--accent);
}

.dz-var-row.is-drop-after {
  box-shadow: 0 2px 0 var(--accent);
}

.dz-var-cell {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
}

.dz-var-row.is-head > .dz-var-cell.is-name {
  padding-left: 34px;
}

.dz-var-cell.is-name {
  gap: 2px;
  padding-left: 2px;
}

.dz-var-cell.is-actions {
  justify-content: center;
  padding: 0;
}

.dz-var-row:not(.is-head) .dz-var-cell.is-actions > .dz-btn,
.dz-var-point {
  opacity: 0;
}

.dz-var-row:hover .dz-var-cell.is-actions > .dz-btn,
.dz-var-row:focus-within .dz-var-cell.is-actions > .dz-btn,
.dz-var-cell.is-value:hover > .dz-var-point,
.dz-var-cell.is-value:focus-within > .dz-var-point,
.dz-var-point:focus-visible {
  opacity: 1;
}

.dz-var-point[hidden] {
  display: none;
}

.dz-var-handle {
  flex: none;
  display: grid;
  place-items: center;
  width: 18px;
  height: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-3);
  cursor: grab;
  opacity: 0;
  touch-action: none;
}

.dz-var-row:hover .dz-var-handle,
.dz-var-handle:focus-visible {
  opacity: 1;
}

.dz-var-type {
  flex: none;
  display: grid;
  place-items: center;
  width: 18px;
  color: var(--text-3);
}

.dz-var-type .dz-icon {
  width: 14px;
  height: 14px;
}

.dz-var-name {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: 600 var(--dz-fs) / 1 var(--font-body);
  text-align: left;
  cursor: var(--nc-arrow, default);
}

.dz-var-name:hover {
  background: var(--dz-hover-bg);
}

.dz-var-name-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dz-var-uses {
  flex: none;
  min-width: 16px;
  padding: 2px 5px;
  border-radius: 8px;
  background: rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.06);
  color: var(--text-3);
  font: 600 10px/1 var(--font-body);
  text-align: center;
}

.dz-var-rename {
  flex: 1;
  height: 28px;
}

.dz-var-mode {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-2);
  font: 650 11.5px/1 var(--font-body);
  text-align: left;
  cursor: var(--nc-hand, pointer);
}

.dz-var-mode:hover {
  background: var(--dz-hover-bg);
  color: var(--text);
}

.dz-var-mode-more {
  opacity: 0;
}

.dz-var-cell.is-mode:hover > .dz-var-mode-more,
.dz-var-cell.is-mode:focus-within > .dz-var-mode-more {
  opacity: 1;
}

.dz-var-mode > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dz-var-default {
  flex: none;
  padding: 2px 5px;
  border-radius: 6px;
  background: rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.06);
  color: var(--text-3);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
}

.dz-var-group-row {
  padding: 10px 8px 4px 34px;
  color: var(--text-3);
  font: 650 11px/1.2 var(--font-body);
}

.dz-var-group-row > .dz-var-cell {
  padding: 0;
}

.dz-var-editor {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

.dz-var-editor[hidden],
.dz-var-alias-row[hidden] {
  display: none;
}

.dz-var-editor > .dz-number,
.dz-var-editor > .dz-input {
  flex: 1;
}

.dz-var-bool {
  min-height: 26px;
}

.dz-var-alias-row {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 2px;
}

.dz-var-alias {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 8px 0 4px;
  border: 0;
  border-radius: 6px;
  background: rgba(var(--dzt-violet-rgb, 185, 140, 255), 0.14);
  box-shadow: 0 0 0 1px rgba(var(--dzt-violet-rgb, 185, 140, 255), 0.3) inset;
  color: var(--text);
  font: 600 11.5px/1 var(--font-body);
  text-align: left;
  cursor: var(--nc-hand, pointer);
}

.dz-var-alias-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dz-var-alias-preview {
  flex: none;
  display: flex;
}

.dz-var-foot {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 12px 8px 8px;
  border-top: 1px solid var(--dz-line);
}

.dz-var-roblox {
  min-height: 28px;
  font-size: var(--dz-fs-sm);
}

.dz-var-foot[hidden],
.dz-var-table-scroll[hidden],
.dz-var-empty-state[hidden] {
  display: none;
}

.dz-var-note {
  padding: 6px 12px 0;
}

.dz-var-none {
  padding: 18px 16px;
}

.dz-var-empty-state {
  flex: 1;
  display: grid;
  place-items: center;
}

.dz-var-window.is-phone .dz-var-table-scroll {
  max-height: none;
  overflow-x: auto;
}

.dz-var-window.is-phone .dz-var-search-row {
  padding: 0 10px 8px;
}

.dz-var-window.is-phone .dz-var-handle,
.dz-var-window.is-phone .dz-var-cell.is-actions > .dz-btn {
  opacity: 1;
}

/* Phones: "Use another variable" is in the row's menu, so the value has the room. */
.dz-var-window.is-phone .dz-var-point {
  display: none;
}

@media (pointer: coarse) {
  .dz-var-chip-detach {
    display: grid;
  }

  .dz-var-bind,
  .dz-var-handle,
  .dz-var-point,
  .dz-var-side-more,
  .dz-var-mode-more,
  .dz-var-row .dz-var-cell.is-actions > .dz-btn {
    opacity: 1;
  }

  .dz-var-bind {
    width: 28px;
    height: 28px;
  }

  .dz-var-option {
    min-height: 44px;
  }
}

/* ---------- pickers (color, paint, gradient, fonts, styles) ---------- */
.dz-pop.is-picker {
  width: 264px;
}

.dz-picker {
  display: grid;
  gap: 0;
}

.dz-picker-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px 8px;
  background: linear-gradient(180deg, var(--dz-surface-strong) 80%, transparent);
}

.dz-picker-title {
  font: 650 12.5px/1.2 var(--font-display);
}

.dz-picker-head .dz-seg {
  height: 28px;
}

.dz-picker > .dz-hint {
  padding: 0 12px 12px;
}

.dz-picker > .dz-button-row {
  padding: 4px 12px 12px;
}

.dz-picker > .dz-style-list {
  padding: 0 6px 6px;
}

.dz-colorpicker {
  --cp-hue: #ff0000;
  --cp-color: #ffffff;
  --cp-x: 0;
  --cp-y: 0;
  --cp-h: 0;
  --cp-a: 1;
  display: grid;
  gap: 10px;
  padding: 0 12px 12px;
}

.dz-cp-area {
  position: relative;
  height: 150px;
  border-radius: 8px;
  background:
    linear-gradient(to top, #000, transparent),
    linear-gradient(to right, #fff, var(--cp-hue));
  box-shadow: 0 0 0 1px rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.08) inset;
  cursor: crosshair;
  touch-action: none;
}

.dz-cp-thumb {
  position: absolute;
  left: calc(var(--cp-x) * 100%);
  top: calc(var(--cp-y) * 100%);
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--cp-color);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.dz-cp-area:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.dz-cp-sliders {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dz-cp-tools {
  display: flex;
  align-items: center;
  gap: 4px;
}

.dz-cp-preview {
  position: relative;
  width: 26px;
  height: 26px;
  overflow: hidden;
  border-radius: 7px;
  background: var(--dz-checker);
  box-shadow: 0 0 0 1px rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.14) inset;
}

.dz-cp-preview span {
  position: absolute;
  inset: 0;
  background: var(--swatch, transparent);
}

.dz-cp-tracks {
  flex: 1;
  display: grid;
  gap: 12px;
}

/* The sliders look 12 px tall but take a 24 px pointer (phones and tablets make both bigger). */
.dz-cp-hue::before,
.dz-cp-alpha::before {
  content: "";
  position: absolute;
  inset: -6px 0;
}

.dz-cp-hue,
.dz-cp-alpha {
  position: relative;
  height: 12px;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.1) inset;
  cursor: var(--nc-hand, pointer);
  touch-action: none;
}

.dz-cp-hue {
  background: linear-gradient(90deg, #f00, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00);
}

.dz-cp-alpha {
  background: var(--dz-checker);
}

.dz-cp-alpha-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--cp-color));
}

.dz-cp-knob {
  position: absolute;
  top: 50%;
  left: calc(var(--cp-h) * 100%);
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 2px 5px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.dz-cp-alpha .dz-cp-knob {
  left: calc(var(--cp-a) * 100%);
}

.dz-cp-hue:focus-visible,
.dz-cp-alpha:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.dz-cp-values {
  display: flex;
  align-items: center;
  gap: 4px;
}

.dz-cp-format {
  flex: none;
  width: 62px;
  padding-right: 18px;
  background-position: right 3px center;
  font-weight: 650;
}

.dz-cp-inputs {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 3px;
}

.dz-cp-inputs .dz-input {
  padding: 0 4px;
  text-align: center;
  font: 500 11.5px/1 var(--font-mono);
}

.dz-cp-hex {
  text-transform: uppercase;
}

.dz-cp-alpha-input {
  flex: none;
  position: relative;
  display: flex;
  align-items: center;
  width: 54px;
}

.dz-cp-alpha-input .dz-input {
  padding: 0 14px 0 4px;
  text-align: right;
  font: 500 11.5px/1 var(--font-mono);
}

.dz-cp-alpha-input span {
  position: absolute;
  right: 5px;
  color: var(--text-3);
  font-size: 10.5px;
  pointer-events: none;
}

.dz-cp-block {
  display: grid;
  gap: 6px;
}

.dz-cp-heading {
  color: var(--text-3);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dz-cp-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dz-cp-swatches {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 5px;
}

.dz-cp-swatch {
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: linear-gradient(var(--swatch), var(--swatch)), var(--dz-checker);
  box-shadow: 0 0 0 1px rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.14) inset;
  cursor: var(--nc-hand, pointer);
  transition: transform 120ms var(--dz-ease);
}

.dz-cp-swatch:hover {
  transform: scale(1.12);
}

.dz-cp-styles {
  display: grid;
  gap: 1px;
}

.dz-cp-style {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: var(--nc-hand, pointer);
}

.dz-cp-style:hover {
  background: var(--dz-hover-bg);
}

.dz-cp-style[aria-pressed="true"] {
  background: var(--dz-selected);
}

.dz-cp-style-swatch {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: linear-gradient(var(--swatch), var(--swatch)), var(--dz-checker);
  box-shadow: 0 0 0 1px rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.16) inset;
}

.dz-cp-style-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Gradient editor. */
.dz-gradient-editor {
  display: grid;
  gap: 10px;
  padding: 0 12px 12px;
}

.dz-gradient-editor .dz-colorpicker {
  padding: 0;
}

.dz-ge-top {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dz-ge-counts {
  flex: 1;
  color: var(--text-3);
  font-size: 10.5px;
  text-align: right;
}

.dz-ge-counts.is-full {
  color: var(--text-2);
}

.dz-ge-barblock {
  display: grid;
  gap: 0;
  padding: 0 7px;
}

.dz-ge-track {
  position: relative;
  height: 18px;
  cursor: copy;
}

.dz-ge-bar {
  position: relative;
  height: 22px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--dz-checker);
  box-shadow: 0 0 0 1px rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.12) inset;
  cursor: copy;
}

.dz-ge-bar-fill {
  position: absolute;
  inset: 0;
  background: var(--gradient, none);
}

/* Keypoints look 14 px but take a 24 px pointer (the inset counts from inside their 2 px edge). */
.dz-ge-stop::before {
  content: "";
  position: absolute;
  inset: -7px;
}

.dz-ge-stop {
  position: absolute;
  left: calc(var(--t) * 100%);
  width: 14px;
  height: 14px;
  margin-left: -7px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 4px;
  background: var(--swatch);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 2px 5px rgba(0, 0, 0, 0.4);
  cursor: grab;
  touch-action: none;
  transition: transform 120ms var(--dz-ease), box-shadow 120ms var(--dz-ease);
}

/* Each stop shows its color and opacity (over a checkerboard), pointing at the bar. */
.dz-ge-track.is-stops .dz-ge-stop {
  top: 2px;
  border-radius: 4px 4px 7px 7px;
  background: linear-gradient(var(--swatch), var(--swatch)), repeating-conic-gradient(var(--dzt-checker-b, #2b2637) 0% 25%, var(--dzt-checker-a, #1b1724) 0% 50%) 0 0 / 6px 6px;
}

.dz-ge-stop.is-end {
  cursor: var(--nc-hand, pointer);
}

.dz-ge-stop.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 0 0 4px rgba(var(--dzt-accent-rgb, 255, 92, 168), 0.3);
  transform: scale(1.12);
}

.dz-ge-stop.is-removing {
  opacity: 0.35;
}

/* The stops as a list: position, color (swatch and hex), opacity, remove. */
.dz-ge-listhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: -4px;
}

.dz-ge-list-title {
  color: var(--text-2);
  font-size: var(--dz-fs-sm);
  font-weight: 650;
}

.dz-ge-list {
  display: grid;
  gap: 2px;
}

.dz-ge-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  margin: 0 -4px;
  padding: 2px 4px;
  border-radius: var(--dz-r-sm);
}

.dz-ge-row.is-selected {
  background: var(--dz-field);
  box-shadow: 0 0 0 1px rgba(var(--dzt-accent-rgb, 255, 92, 168), 0.45) inset;
}

.dz-ge-row .dz-number.is-compact {
  width: 58px;
}

.dz-ge-row .dz-number-input {
  padding: 0 3px 0 2px;
}

.dz-ge-row .dz-ge-swatch {
  width: 22px;
  height: 22px;
}

.dz-ge-row .dz-ge-hex {
  flex: 1;
  min-width: 0;
  padding: 0 6px;
}

.dz-ge-row > .dz-btn.is-small {
  flex: none;
  width: 24px;
}

.dz-ge-row > .dz-btn:disabled {
  opacity: 0.3;
}

.dz-ge-settings {
  display: grid;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--dz-line);
}

/* A radial or diamond gradient's own width and height, and the button that makes a radial one round again. */
.dz-ge-size {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dz-ge-size > .dz-prop-grid {
  flex: 1;
}

/* Font picker. */
.dz-pop.is-picker:has(.is-fonts) {
  width: 300px;
}

.dz-font-searchbox {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0 12px 8px;
  color: var(--text-3);
}

.dz-font-searchbox > .dz-icon {
  position: absolute;
  left: 8px;
  width: 14px;
  height: 14px;
}

.dz-font-searchbox .dz-input {
  padding-left: 28px;
}

.dz-font-list {
  max-height: 340px;
  overflow: auto;
  padding: 0 6px 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.16) transparent;
}

.dz-font-group {
  padding: 8px 8px 4px;
  color: var(--text-3);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dz-font-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 8px 0 4px;
  border-radius: 7px;
  cursor: var(--nc-hand, pointer);
}

.dz-font-row.is-active {
  background: rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.08);
}

.dz-font-row.is-current {
  color: var(--accent-ink);
}

.dz-font-check {
  display: grid;
  place-items: center;
  width: 16px;
  color: var(--accent-ink);
}

.dz-font-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dz-picker.is-fonts > .dz-hint {
  padding: 8px 12px 12px;
  border-top: 1px solid var(--dz-line);
}

/* The picker's groups: the project's fonts, Roblox's, this device's (and a missing current font). */
.dz-font-group {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.dz-font-group-note {
  color: var(--text-3);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.8;
}

.dz-font-row.is-missing {
  color: var(--warn);
  cursor: var(--nc-arrow, default);
}

.dz-font-row.is-missing .dz-font-check {
  color: var(--warn);
}

.dz-font-local {
  justify-self: start;
  margin: 4px 8px 6px;
}

.dz-font-local-hint {
  padding: 0 8px 6px;
}

.dz-font-foot {
  display: flex;
  justify-content: flex-start;
  padding: 6px 10px 10px;
  border-top: 1px solid var(--dz-line);
}

.dz-font-foot[hidden],
.dz-font-upload[hidden] {
  display: none;
}

/* Text section: a font this device lacks, the unit of letter spacing, the case buttons, the Roblox note. */
.dz-font-button-warning {
  flex: none;
  color: var(--warn);
}

.dz-font-button-warning.is-hidden {
  display: none;
}

.dz-font-button.is-missing .dz-font-button-name {
  color: var(--text-2);
  font-style: italic;
}

.dz-font-note-icon {
  display: inline-flex;
  flex: none;
  color: var(--text-3);
}

.dz-font-note[data-kind="missing"],
.dz-font-note[data-kind="missing"] .dz-font-note-icon {
  color: var(--warn);
}

.dz-number-unit.is-switch {
  pointer-events: auto;
  cursor: var(--nc-hand, pointer);
  border-radius: 4px;
}

.dz-number-unit.is-switch:hover {
  color: var(--text);
}

/* A finger needs more room to switch the unit. */
.designer[data-layout="phone"] .dz-number-unit.is-switch,
.designer[data-layout="tablet"] .dz-number-unit.is-switch {
  align-self: stretch;
  display: grid;
  place-items: center;
  padding: 0 12px;
}

.dz-case-seg > button {
  padding: 0 5px;
  font-variant-ligatures: none;
}

.dz-text-roblox-note[hidden] {
  display: none;
}

/* Assets panel: the project's fonts. */
.dz-font-assets {
  display: grid;
  gap: 2px;
  padding: 2px 6px 8px;
}

.dz-font-assets[hidden],
.dz-fonts-empty[hidden] {
  display: none;
}

.dz-font-asset {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 4px 4px 4px 8px;
  border-radius: 8px;
}

.dz-font-asset:hover,
.dz-font-asset:focus-within {
  background: var(--dz-hover-bg);
}

.dz-font-asset-text {
  flex: 1;
  min-width: 0;
  display: grid;
}

.dz-font-asset-name {
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dz-fonts-empty {
  padding: 0 12px 8px;
}

/* Missing fonts: one row per font, with a font button to replace it. */
.dz-missing-fonts {
  display: grid;
  gap: 6px;
}

.dz-missing-font {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 8px 10px;
  border: 1px solid var(--dz-line);
  border-radius: 10px;
}

.dz-missing-font-icon {
  display: inline-flex;
  color: var(--warn);
}

.dz-missing-font.is-done .dz-missing-font-icon {
  color: var(--ok);
}

.dz-missing-font-text {
  flex: 1;
  min-width: 120px;
  display: grid;
}

.dz-missing-font-name {
  overflow: hidden;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dz-missing-font-choose {
  flex: 0 1 180px;
  width: auto;
}

/* 9-slice editor. */
.dz-slice-editor {
  display: grid;
  gap: 12px;
}

.dz-slice-main {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(220px, 1fr);
  gap: 16px;
  align-items: start;
}

.dz-slice-stage {
  --l: 0.33;
  --r: 0.33;
  --t: 0.33;
  --b: 0.33;
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: var(--img-ratio, 1);
  max-height: 380px;
  margin: 0 auto;
  border-radius: 8px;
  background: var(--dz-checker);
  box-shadow: 0 0 0 1px rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.1) inset;
  touch-action: none;
}

.dz-slice-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  image-rendering: auto;
  user-select: none;
}

.dz-slice-guide {
  position: absolute;
  z-index: 1;
  background: transparent;
  touch-action: none;
}

.dz-slice-guide::after {
  content: "";
  position: absolute;
  background: var(--accent);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}

.dz-slice-guide.is-v {
  top: 0;
  bottom: 0;
  width: 14px;
  margin-left: -7px;
  cursor: ew-resize;
}

.dz-slice-guide.is-v::after {
  top: 0;
  bottom: 0;
  left: 6px;
  width: 2px;
}

.dz-slice-guide.is-h {
  left: 0;
  right: 0;
  height: 14px;
  margin-top: -7px;
  cursor: ns-resize;
}

.dz-slice-guide.is-h::after {
  left: 0;
  right: 0;
  top: 6px;
  height: 2px;
}

.dz-slice-guide[data-side="l"] {
  left: calc(var(--l) * 100%);
}

.dz-slice-guide[data-side="r"] {
  left: calc(100% - var(--r) * 100%);
}

.dz-slice-guide[data-side="t"] {
  top: calc(var(--t) * 100%);
}

.dz-slice-guide[data-side="b"] {
  top: calc(100% - var(--b) * 100%);
}

.dz-slice-guide:focus-visible::after {
  background: #fff;
  box-shadow: 0 0 0 3px var(--accent);
}

.dz-slice-side {
  display: grid;
  gap: 10px;
}

.dz-slice-previews {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  min-height: 110px;
}

.dz-slice-preview {
  width: calc(var(--pw) * 52px);
  height: calc(var(--ph) * 52px);
  border-style: solid;
  border-color: transparent;
  background: var(--dz-checker);
  background-clip: padding-box;
}

/* ============================================================================================================
   7. The projects screen, privacy and about, shortcuts
   ============================================================================================================ */

.dz-projects {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: var(--dz-safe-top) var(--dz-safe-right) 0 var(--dz-safe-left);
  background:
    radial-gradient(70vw 60vh at -10% 20%, rgba(var(--dzt-cyan-rgb, 92, 225, 245), calc(0.06 * var(--dzt-glow, 1))), transparent 70%),
    radial-gradient(70vw 70vh at 110% 85%, rgba(var(--dzt-accent-rgb, 255, 92, 168), calc(0.07 * var(--dzt-glow, 1))), transparent 70%),
    var(--bg);
  transform: scale(0.995);
}

.dz-projects.is-open {
  transform: none;
}

/* The site's 64 px grid, very faint, behind the cards. */
.dz-projects::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.028) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent);
  mask-image: linear-gradient(180deg, #000 40%, transparent);
}

.dz-projects.is-busy {
  cursor: progress;
}

.dz-projects.is-dropping::after {
  content: "Drop project files to open them";
  position: absolute;
  inset: 12px;
  display: grid;
  place-items: center;
  border: 2px dashed var(--accent-line);
  border-radius: var(--radius-xl);
  background: rgba(var(--dzt-accent-rgb, 255, 92, 168), 0.06);
  color: var(--text);
  font: 650 1.1rem/1 var(--font-display);
  pointer-events: none;
}

.dz-projects-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 60px;
  padding: 0 clamp(14px, 3vw, 32px);
}

.dz-projects-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 650 15px/1 var(--font-display);
}

.dz-projects-brand img {
  border-radius: 9px;
  box-shadow: 0 0 0 1px rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.08), 0 8px 22px -10px rgba(var(--dzt-accent-rgb, 255, 92, 168), calc(0.6 * var(--dzt-glow, 1)));
}

.dz-projects-top-end {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dz-projects-main {
  min-height: 0;
}

.dz-projects-inner {
  display: grid;
  gap: 22px;
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: clamp(12px, 3vw, 28px) clamp(14px, 3vw, 32px) calc(48px + var(--dz-safe-bottom));
}

.dz-projects-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.dz-projects-title {
  font: 650 clamp(1.5rem, 3vw, 2rem)/1.1 var(--font-display);
  letter-spacing: -0.025em;
}

.dz-projects-sub {
  max-width: 64ch;
  margin-top: 6px;
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.5;
}

.dz-projects-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dz-projects-actions .dz-btn,
.dz-projects-back.dz-btn {
  height: 38px;
  padding: 0 16px;
  border-radius: 11px;
  font-size: 13px;
}

.dz-projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: clamp(12px, 2vw, 20px);
}

.dz-project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: var(--glass-1);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-md);
  transition: transform var(--medium) var(--dz-ease), border-color var(--medium) var(--dz-ease), box-shadow var(--medium) var(--dz-ease);
}

.dz-project-card:hover {
  border-color: var(--glass-border-hover);
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.dz-project-card.is-current {
  border-color: var(--accent-line);
}

.dz-project-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: var(--nc-hand, pointer);
}

.dz-project-thumb {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background:
    radial-gradient(70% 80% at 25% 15%, rgba(var(--dzt-accent-rgb, 255, 92, 168), calc(0.12 * var(--dzt-glow, 1))), transparent 65%),
    radial-gradient(60% 70% at 85% 95%, rgba(var(--dzt-violet-rgb, 185, 140, 255), calc(0.1 * var(--dzt-glow, 1))), transparent 65%),
    rgb(var(--dzt-well-rgb, 15, 12, 21));
  -webkit-mask-image: linear-gradient(180deg, #000 70%, rgba(0, 0, 0, 0.45) 92%, transparent);
  mask-image: linear-gradient(180deg, #000 70%, rgba(0, 0, 0, 0.45) 92%, transparent);
}

.dz-project-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1100ms var(--dz-ease);
}

.dz-project-card:hover .dz-project-thumb img {
  transform: scale(1.04);
}

.dz-project-placeholder {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--dz-line-strong);
  border-radius: 14px;
  background: rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.03);
  color: var(--text-3);
}

.dz-project-body {
  display: grid;
  gap: 6px;
  padding: 2px 14px 14px;
}

.dz-project-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dz-project-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font: 650 15px/1.25 var(--font-display);
  letter-spacing: -0.015em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dz-project-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.dz-project-meta {
  color: var(--text-3);
  font-size: var(--dz-fs-sm);
}

.dz-projects-empty {
  grid-column: 1 / -1;
  padding: 48px 18px;
  border: 1px dashed var(--dz-line-strong);
  border-radius: var(--radius-lg);
}

.dz-projects-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
}

.dz-storage-card {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
}

.dz-storage-line {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
  font-size: 13px;
}

.dz-storage-line .dz-icon {
  color: var(--ok);
}

.dz-storage-line strong {
  color: var(--text);
}

.dz-storage-detail {
  color: var(--text-3);
  font-size: var(--dz-fs);
  line-height: 1.5;
}

.dz-projects-foot-actions {
  display: grid;
  justify-items: end;
  gap: 10px;
}

.dz-delete-all {
  color: var(--dz-danger-ink);
}

.dz-projects-links {
  color: var(--text-3);
  font-size: var(--dz-fs);
}

.dz-projects-links a {
  color: var(--text-2);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color var(--dz-fast) var(--dz-ease), text-decoration-color var(--dz-fast) var(--dz-ease);
}

.dz-projects-links a:hover {
  color: var(--text);
  text-decoration-color: var(--accent);
}

/* Privacy, about and error details. */
.dz-privacy-note {
  display: grid;
  gap: 10px;
}

.dz-privacy-lead {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--ok-line);
  border-radius: var(--radius);
  background: var(--ok-soft);
  color: var(--text);
  font: 650 14px/1.4 var(--font-display);
}

.dz-privacy-lead-icon {
  color: var(--ok);
}

.dz-privacy-title {
  margin-top: 6px;
  font: 650 13.5px/1.3 var(--font-display);
}

.dz-privacy-list,
.dz-privacy-steps {
  display: grid;
  gap: 6px;
  padding-left: 20px;
  color: var(--text-2);
}

.dz-privacy-list {
  list-style: disc;
}

.dz-privacy-steps {
  list-style: decimal;
}

.dz-privacy-list strong {
  color: var(--text);
}

.dz-privacy-usage,
.dz-privacy-kept {
  color: var(--text-3);
  font-size: var(--dz-fs);
}

.dz-privacy-more {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.dz-privacy-more a {
  color: var(--accent-ink);
  font-weight: 650;
}

.dz-privacy-more a:hover {
  text-decoration: underline;
}

.dz-privacy-more .dz-icon {
  width: 14px;
  height: 14px;
  color: var(--accent-ink);
}

/* The projects screen's privacy badge is a little bigger. */
.dz-projects-top .dz-privacy {
  height: 30px;
  padding: 0 11px 0 9px;
  font-size: var(--dz-fs-sm);
}

.dz-about {
  display: grid;
  gap: 12px;
}

.dz-about-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.dz-about-head img {
  border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.08), 0 14px 30px -12px rgba(var(--dzt-accent-rgb, 255, 92, 168), calc(0.55 * var(--dzt-glow, 1)));
}

.dz-about-name {
  font: 650 1.2rem/1.2 var(--font-display);
}

.dz-about-version {
  color: var(--text-3);
  font: 500 12px/1.4 var(--font-mono);
}

.dz-error-details {
  display: grid;
  gap: 12px;
}

.dz-error-details pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Keyboard shortcut sheet. */
.dz-shortcuts {
  display: grid;
  gap: 12px;
}

.dz-shortcuts .dz-font-searchbox {
  margin: 0;
}

.dz-shortcuts-body {
  columns: 2 280px;
  column-gap: 24px;
}

.dz-shortcut-group {
  break-inside: avoid;
  margin-bottom: 16px;
}

.dz-shortcut-title {
  margin-bottom: 6px;
  color: var(--text-3);
  font: 700 10.5px/1.2 var(--font-body);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.dz-shortcut-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: center;
}

.dz-shortcut-list dt {
  color: var(--text-2);
  font-size: 12.5px;
}

.dz-shortcut-list dd {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

.dz-shortcut-list .dz-kbd + .dz-kbd {
  margin-left: 0;
}

/* ---------- the speed tools: W / H menus, Find and replace, Rename several layers ---------- */
/* The end of a W or H field: a small caret for Fixed, "Hug" or "Fill" otherwise (ui/properties/sizing.js). */
.dz-size-mode {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 22px;
  height: 100%;
  padding: 0 5px 0 3px;
  border: 0;
  border-radius: 0 var(--dz-r-sm) var(--dz-r-sm) 0;
  background: transparent;
  color: var(--text-3);
  font: 650 10.5px/1 var(--font-body);
  cursor: var(--nc-hand, pointer);
}

.dz-size-mode:hover {
  background: var(--dz-hover-bg);
  color: var(--text);
}

.dz-size-mode[data-mode="hug"],
.dz-size-mode[data-mode="fill"] {
  color: var(--accent-ink);
}

.dz-size-mode:disabled {
  opacity: 0.45;
  cursor: var(--nc-arrow, default);
}

.dz-size-mode-caret {
  flex: none;
  width: 12px;
  height: 12px;
}

/* In a Roblox screen: "W Fixed ⌄" and "H Hug ⌄" on their own row under Scale and Offset. */
.dz-size-modes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.dz-size-mode.is-long {
  justify-content: flex-start;
  gap: 6px;
  height: var(--dz-h);
  padding: 0 8px;
  border-radius: var(--dz-r-sm);
  background: var(--dz-field);
  color: var(--text);
  font-size: var(--dz-fs-sm);
}

.dz-size-mode.is-long:hover {
  background: var(--dz-field-hover);
}

.dz-size-mode.is-long .dz-size-mode-word {
  flex: 1;
  text-align: left;
}

.dz-size-mode-axis {
  color: var(--text-3);
}

/* Min / Max fields under the size: their labels are a little longer than W and H. */
.dz-size-limits .dz-number-label {
  min-width: 38px;
  white-space: nowrap;
}

/* Find and replace: a small panel at the top of the free canvas (ui/find.js places it). */
.dz-find {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: var(--dz-find-w, 340px);
  max-height: var(--dz-find-max-h, min(540px, calc(100vh - 120px)));
  overflow: hidden;
  border: 1px solid var(--glass-border-hover);
  border-radius: 14px;
  background: var(--dz-surface-strong);
  -webkit-backdrop-filter: var(--dz-blur);
  backdrop-filter: var(--dz-blur);
  box-shadow: var(--dz-shadow-pop);
  transform: translateY(-4px);
}

.dz-find.is-open {
  transform: none;
}

/* Over the layers panel it takes the panel's whole height, like a Find view in its place. */
.dz-find.is-docked {
  height: var(--dz-find-max-h);
}

.dz-find-row {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 6px 0;
}

.dz-find-row.is-filters {
  padding: 6px 6px 6px 8px;
  border-bottom: 1px solid var(--dz-line);
}

.dz-find-row.is-replace {
  padding-left: calc(var(--dz-h-sm) + 10px);
}

.dz-find-row .dz-btn {
  flex: none;
}

.dz-find-box {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  height: var(--dz-h);
  padding: 0 3px 0 8px;
  border: 1px solid transparent;
  border-radius: var(--dz-r-sm);
  background: var(--dz-field);
}

.dz-find-box:focus-within {
  border-color: var(--accent-line);
  background: var(--dz-field-focus);
}

.dz-find-glyph {
  flex: none;
  color: var(--text-3);
}

.dz-find-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: var(--dz-fs);
}

.dz-find-input::placeholder {
  color: var(--text-3);
}

/* The box around it shows the focus. */
.designer .dz-find-input:focus-visible {
  outline: none;
}

.dz-find-opt {
  flex: none;
  min-width: 22px;
  height: 20px;
  padding: 0 4px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--text-3);
  font: 650 11px/1 var(--font-mono);
  cursor: var(--nc-hand, pointer);
}

.dz-find-opt.is-word {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dz-find-opt:hover {
  background: var(--dz-hover-bg);
  color: var(--text);
}

.dz-find-opt[aria-pressed="true"] {
  border-color: var(--accent-line);
  background: var(--dz-selected);
  color: var(--accent-ink);
}

.dz-find .dz-select {
  flex: 1 1 0;
  min-width: 0;
  height: var(--dz-h-sm);
  font-size: var(--dz-fs-sm);
}

.dz-find-foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 6px 4px 12px;
  border-top: 1px solid var(--dz-line);
}

.dz-find-count {
  flex: 1;
  min-width: 0;
  color: var(--text-3);
  font: 500 10.5px/1 var(--font-mono);
  white-space: nowrap;
}

.dz-find-list {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 4px;
}

.dz-find-page {
  padding: 8px 8px 4px;
  color: var(--text-3);
  font: 700 10px/1.2 var(--font-body);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.dz-find-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 4px 8px;
  border-radius: 8px;
  cursor: var(--nc-hand, pointer);
}

.dz-find-item:hover {
  background: var(--dz-hover-bg);
}

.dz-find-item.is-active {
  background: var(--dz-selected);
  box-shadow: 0 0 0 1px rgba(var(--dzt-accent-rgb, 255, 92, 168), 0.22) inset;
}

.dz-find-item.is-dim {
  opacity: 0.55;
}

.dz-find-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 16px;
  color: var(--text-3);
}

.dz-find-texts {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 1px;
}

.dz-find-name,
.dz-find-words {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dz-find-name {
  color: var(--text);
}

.dz-find-words {
  color: var(--text-3);
  font-size: var(--dz-fs-sm);
}

.dz-find-item mark {
  background: transparent;
  color: var(--accent-ink);
  font-weight: 750;
}

.dz-find-empty {
  padding: 14px;
  color: var(--text-3);
  text-align: center;
}

/* Rename several layers: Match, Rename to, the code buttons and the preview (ui/rename.js). */
.dz-rename {
  display: grid;
  gap: 12px;
}

.dz-rename .dz-field + .dz-field {
  margin-top: 0;
}

.dz-rename-match {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dz-rename-match .dz-input {
  flex: 1;
  min-width: 0;
}

.dz-find-opt.dz-rename-regex {
  min-width: var(--dz-h);
  height: var(--dz-h);
  border-color: var(--dz-line-strong);
}

.dz-rename-tokens {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.dz-rename-start-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: var(--text-3);
  font-size: var(--dz-fs-sm);
}

.dz-input.dz-rename-start {
  width: 56px;
  text-align: center;
}

.dz-rename-preview {
  max-height: 220px;
  overflow: auto;
  padding: 4px;
  border: 1px solid var(--dz-line);
  border-radius: var(--dz-r);
  background: rgba(0, 0, 0, 0.14);
  list-style: none;
}

.dz-rename-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 26px;
  padding: 0 6px;
}

.dz-rename-before,
.dz-rename-after {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dz-rename-before,
.dz-rename-arrow,
.dz-rename-row:not(.is-changed) .dz-rename-after {
  color: var(--text-3);
}

.dz-rename-row.is-changed .dz-rename-after {
  color: var(--text);
  font-weight: 650;
}

/* Touch screens: bigger option buttons; phones: across the top under the top bar, 16 px text (no zoom on iPhone). */
@media (pointer: coarse) {
  .dz-find-opt {
    min-width: 30px;
    height: 28px;
  }

  .dz-size-mode {
    min-width: 32px;
  }

  .dz-find-item {
    min-height: 40px;
  }
}

.designer[data-layout="phone"] .dz-find {
  right: 8px;
  width: auto;
  border-radius: 16px;
}

.designer[data-layout="phone"] .dz-find-list {
  max-height: 32vh;
}

.designer[data-layout="phone"] :is(.dz-find-opt, .dz-size-mode) {
  min-width: 44px;
}

.designer[data-layout="phone"] .dz-find-box {
  height: calc(var(--dz-h) + 2px);
}

.designer[data-layout="phone"] .dz-find-opt {
  height: 44px;
}

.designer[data-layout="phone"] .dz-find-input {
  font-size: 16px;
}

.designer[data-layout="phone"] .dz-find-item {
  min-height: 48px;
}

/* ============================================================================================================
   8. Narrower windows, tablets, phones, touch, reduced motion
   ============================================================================================================ */

/* Narrower computer windows: the top-right group gets more compact. */
@media (max-width: 1440px) {
  .designer[data-layout="desktop"] .dz-device-size {
    display: none;
  }
}

@media (max-width: 1300px) {
  .designer[data-layout="desktop"] .dz-dragmode,
  .designer[data-layout="desktop"] .dz-import > span,
  .designer[data-layout="desktop"] .dz-preview-toggle > span {
    display: none;
  }

  .designer[data-layout="desktop"] .dz-import,
  .designer[data-layout="desktop"] .dz-preview-toggle {
    width: 32px;
    padding: 0;
    justify-content: center;
  }
}

/* Touch screens and pens: bigger controls everywhere. */
@media (pointer: coarse) {
  .designer {
    --dz-h: 34px;
    --dz-h-sm: 30px;
    --dz-row-h: 36px;
    --dz-target: 36px;
  }

  .dz-layer-action {
    width: 30px;
    height: 30px;
    opacity: 1;
  }

  .dz-page-handle,
  .dz-paint-handle {
    width: 24px;
    height: 32px;
    opacity: 0.7;
  }

  .dz-tool {
    width: 42px;
    height: 42px;
  }

  .dz-tool-more {
    width: 20px;
    height: 42px;
  }
}

/* ---------- tablets: the same floating panels, opened from the chips ---------- */
.designer[data-layout="tablet"] {
  --dz-h: 32px;
  --dz-h-sm: 28px;
  --dz-row-h: 34px;
  --dz-left-w: 280px;
  --dz-right-w: 300px;
}

.designer[data-layout="tablet"] :is(.dz-dragmode, .dz-device-size, .dz-import > span, .dz-preview-toggle > span, .dz-device-label) {
  display: none;
}

.designer[data-layout="tablet"] :is(.dz-import, .dz-preview-toggle) {
  width: 34px;
  padding: 0;
  justify-content: center;
}

.designer[data-layout="tablet"] .dz-panel {
  background: var(--dz-surface-strong);
}

/* The top-right group keeps its corner; the right panel opens below it. */
.designer[data-layout="tablet"] .dz-right {
  top: calc(var(--dz-edge) + 52px + var(--dz-safe-top));
}

.designer[data-layout="tablet"] .dz-viewbar {
  right: calc(var(--dz-edge) + var(--dz-safe-right));
}

.designer[data-layout="tablet"] .dz-panel-close {
  display: inline-flex;
}

.designer[data-layout="tablet"] .dz-resizer {
  display: none;
}

.designer[data-layout="tablet"] .dz-minimize {
  display: none;
}

/* Touch tablets get a little more room for fingers than mouse ones. */
@media (pointer: coarse) {
  .designer:not([data-layout="phone"]) {
    --dz-h: 36px;
    --dz-h-sm: 32px;
    --dz-row-h: 40px;
  }

  .designer[data-layout="tablet"] {
    --dz-left-w: 290px;
    --dz-right-w: 320px;
  }

  /* Bigger touch controls need a little more panel width on big touch screens too. */
  .designer[data-layout="desktop"] {
    --dz-left-w: max(var(--dz-left-user-w, 256px), 280px);
    --dz-right-w: max(var(--dz-right-user-w, 280px), 320px);
  }

  .designer:not([data-layout="phone"]) .dz-dragmode {
    height: 36px;
  }

  /* Tablets and big touch screens (an iPad Pro on its side gets the computer layout): small controls take at
     least a 32 px touch. Phones have their own, bigger sizes below. */
  .designer:not([data-layout="phone"]) .dz-tool-more {
    display: none;
  }

  .designer:not([data-layout="phone"]) .dz-tool-group.has-more .dz-tool::after {
    content: "";
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 0;
    height: 0;
    border: 3px solid transparent;
    border-right-color: currentColor;
    border-bottom-color: currentColor;
    opacity: 0.7;
  }

  .designer:not([data-layout="phone"]) :is(.dz-anchor-grid, .dz-align-grid) {
    grid-template-columns: repeat(3, 32px);
    grid-template-rows: repeat(3, 32px);
  }

  .designer:not([data-layout="phone"]) :is(.dz-save, .dz-privacy) {
    min-width: 32px;
    height: 32px;
  }

  .designer:not([data-layout="phone"]) :is(.dz-page-handle, .dz-paint-handle) {
    width: 32px;
    height: 32px;
  }

  .designer:not([data-layout="phone"]) .dz-layer-twisty {
    position: relative;
  }

  .designer:not([data-layout="phone"]) .dz-layer-twisty::before {
    inset: -8px;
  }

  .designer:not([data-layout="phone"]) .dz-ge-stop::before {
    inset: -11px;
  }

  .designer:not([data-layout="phone"]) .dz-picker-head .dz-seg {
    height: 36px;
  }

  .designer:not([data-layout="phone"]) :is(.dz-cp-hue, .dz-cp-alpha) {
    height: 16px;
  }

  .designer:not([data-layout="phone"]) :is(.dz-cp-hue, .dz-cp-alpha)::before {
    content: "";
    position: absolute;
    inset: -8px 0;
  }

  .designer:not([data-layout="phone"]) .dz-cp-tracks {
    gap: 16px;
    padding: 8px 0;
  }

  .designer:not([data-layout="phone"]) :is(.dz-projects-links, .dz-privacy-more) a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
  }

  .designer:not([data-layout="phone"]) :is(.dz-menu-item, .dz-panel-tabs [role="tab"], .dz-section-toggle, .dz-project-name, .dz-project-name-input, .dz-sel-name.dz-input) {
    min-height: 36px;
    height: auto;
  }

  .designer:not([data-layout="phone"]) :is(.dz-layer-action, .dz-icon-btn, .dz-btn.is-icon) {
    min-width: 32px;
    min-height: 32px;
  }

  .designer:not([data-layout="phone"]) .dz-seg > button {
    min-width: 34px;
  }

  .designer:not([data-layout="phone"]) .dz-prop-row.is-split {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .designer:not([data-layout="phone"]) .dz-cp-swatches {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* ---------- phones: the canvas fills the screen, a top bar, tools at the bottom, panels as sheets ---------- */
.designer[data-layout="phone"] {
  --dz-h: 44px;
  --dz-h-sm: 44px;
  --dz-row-h: 48px;
  --dz-target: 44px;
  --dz-fs: 13px;
  --dz-fs-sm: 12px;
}

/* Every control a finger uses is at least 44 x 44 px on phones. */
.designer[data-layout="phone"] .dz-seg {
  height: 48px;
}

.designer[data-layout="phone"] .dz-seg > button {
  min-width: 44px;
}

.designer[data-layout="phone"] .dz-prop-row.is-split {
  flex-wrap: wrap;
  row-gap: 6px;
}

/* The number box has a 1 px edge on each side, so it is 2 px taller to give the typing area itself 44 px. */
.designer[data-layout="phone"] .dz-number {
  height: calc(var(--dz-h) + 2px);
}

.designer[data-layout="phone"] .dz-number.is-compact {
  width: 78px;
}

.designer[data-layout="phone"] :is(.dz-panel-tabs [role="tab"], .dz-section-toggle, .dz-page-row, .dz-font-row, .dz-style-row-main, .dz-cp-style, .dz-palette-item, .dz-component-row) {
  min-height: 44px;
  height: auto;
}

.designer[data-layout="phone"] :is(.dz-layer-action, .dz-layer-twisty, .dz-page-handle, .dz-paint-handle, .dz-layer-grip, .dz-toast-close, .dz-toast-action) {
  min-width: 44px;
  height: 44px;
}

.designer[data-layout="phone"] .dz-layer-action,
.designer[data-layout="phone"] .dz-page-handle,
.designer[data-layout="phone"] .dz-paint-handle {
  width: 44px;
  opacity: 1;
}

.designer[data-layout="phone"] .dz-anchor-grid,
.designer[data-layout="phone"] .dz-align-grid {
  grid-template-columns: repeat(3, 44px);
  grid-template-rows: repeat(3, 44px);
}

.designer[data-layout="phone"] .dz-phonebar .dz-phone-export {
  height: 44px !important;
}

/* Gradient keypoints keep their look but take a 44 px touch. */
.designer[data-layout="phone"] .dz-ge-stop::before {
  content: "";
  position: absolute;
  inset: -13px;
}

.designer[data-layout="phone"] :is(.dz-viewbar, .dz-float-chip, .dz-minimize, .dz-resizer) {
  display: none !important;
}

.designer[data-layout="phone"] .dz-phonebar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 4px;
  height: calc(54px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) calc(6px + var(--dz-safe-right)) 0 calc(4px + var(--dz-safe-left));
  border-width: 0 0 1px;
  border-radius: 0;
  background: var(--dz-surface-strong);
}

.dz-title.is-compact {
  align-items: center;
}

/* The title takes the free room, so the actions (?, the device menu, Export) keep the right edge on every phone. */
.designer[data-layout="phone"] .dz-phonebar > .dz-title {
  flex: 1;
  min-width: 0;
}

.dz-title.is-compact .dz-title-name {
  min-width: 0;
}

.dz-title.is-compact .dz-project-name {
  height: 44px;
  margin: 0;
  font-size: 14px;
}

.dz-title.is-compact .dz-project-name-input {
  height: 44px;
  margin: 0;
}

.dz-title.is-compact .dz-save {
  width: 44px;
  height: 44px;
  justify-content: center;
  padding: 0;
}

.dz-title.is-compact .dz-save-label {
  display: none;
}

.dz-title.is-compact .dz-menu-button {
  height: 44px;
  padding: 0 6px;
}

.designer[data-layout="phone"] .dz-phonebar .dz-icon-btn {
  width: 44px;
  height: 44px;
}

.dz-phone-export {
  width: 44px !important;
  height: 44px !important;
}

/* The tool bar spans the bottom edge, with Layers and Design at its ends. */
.designer[data-layout="phone"] .dz-toolbar {
  left: 0;
  right: 0;
  bottom: 0;
  justify-content: space-between;
  width: auto;
  max-width: none;
  height: calc(62px + env(safe-area-inset-bottom));
  padding: 7px calc(6px + var(--dz-safe-right)) calc(7px + env(safe-area-inset-bottom)) calc(6px + var(--dz-safe-left));
  border-width: 1px 0 0;
  border-radius: 0;
  background: var(--dz-surface-strong);
}

/* Centered while the tools fit; on a narrower phone they start at the left edge and scroll, so no tool is cut off
   where it can't be reached (plain centering pushes the first ones past the start). */
.designer[data-layout="phone"] .dz-toolbar-tools {
  flex: 1;
  justify-content: flex-start;
  justify-content: safe center;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.designer[data-layout="phone"] .dz-toolbar-extras {
  display: none;
}

.designer[data-layout="phone"] .dz-toolbar .dz-toolbar-panel {
  display: grid;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 12px;
}

.designer[data-layout="phone"] .dz-tool {
  width: 44px;
  height: 46px;
  border-radius: 12px;
}

.designer[data-layout="phone"] .dz-tool-more {
  display: none;
}

/* A tool with others behind it shows a small corner mark; tapping it again (or a long press) opens them. */
.designer[data-layout="phone"] .dz-tool-group.has-more .dz-tool::after {
  content: "";
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 0;
  height: 0;
  border: 3px solid transparent;
  border-right-color: currentColor;
  border-bottom-color: currentColor;
  opacity: 0.7;
}

.designer[data-layout="phone"] .dz-tool-group[data-group="frame"],
.designer[data-layout="phone"] .dz-tool-group[data-group="draw"],
.designer[data-layout="phone"] .dz-tool-group[data-group="text"] {
  margin-left: 0;
}

.designer[data-layout="phone"] .dz-tool-group::before {
  display: none;
}

/* Panels are bottom sheets. */
.designer[data-layout="phone"] .dz-panel {
  position: fixed;
  top: auto;
  left: 0;
  right: 0;
  bottom: var(--dz-keyboard);
  z-index: 6;
  width: auto;
  height: min(72dvh, 640px);
  max-height: calc(100dvh - var(--dz-keyboard) - var(--dz-safe-top) - 12px);
  padding: 0 var(--dz-safe-right) env(safe-area-inset-bottom) var(--dz-safe-left);
  border-width: 1px 1px 0;
  border-radius: 18px 18px 0 0;
  background: var(--dz-surface-strong);
  box-shadow: var(--dz-shadow-pop);
  opacity: 1;
  transform: translateY(var(--dz-sheet-drag, 0px));
  transition: transform 280ms var(--dz-ease), visibility 280ms;
}

.designer[data-layout="phone"] .dz-panel.is-dragging {
  transition: none;
}

/* A phone on its side: the panels stand on the right, below the top bar, so the design stays in sight. (A phone
   held upright is never this wide, even while its keyboard is up.) */
@media (orientation: landscape) and (min-width: 560px) {
  .designer[data-layout="phone"] .dz-panel {
    top: calc(60px + var(--dz-safe-top));
    left: auto;
    width: min(400px, 58vw);
    height: auto;
    max-height: none;
    padding-left: 0;
    border-width: 1px 0 0 1px;
    border-radius: 18px 0 0 0;
  }

  /* Layers stay on the left, like on a computer. */
  .designer[data-layout="phone"] .dz-left {
    right: auto;
    left: 0;
    padding-right: 0;
    padding-left: var(--dz-safe-left);
    border-width: 1px 1px 0 0;
    border-radius: 0 18px 0 0;
  }

  .designer[data-layout="phone"].has-keyboard .dz-panel {
    top: calc(6px + var(--dz-safe-top));
  }
}

.designer[data-layout="phone"][data-left="closed"] .dz-left,
.designer[data-layout="phone"][data-right="closed"] .dz-right {
  visibility: hidden;
  opacity: 1;
  transform: translateY(calc(100% + 24px));
}

.designer[data-layout="phone"] .dz-panel-handle {
  display: block;
}

.designer[data-layout="phone"] .dz-panel-close {
  display: inline-flex;
}

.designer[data-layout="phone"] .dz-left-head {
  display: none;
}

.designer[data-layout="phone"] .dz-left .dz-pages {
  border-top: 0;
}

.designer[data-layout="phone"].has-floating-panel .dz-panel-backdrop {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: block;
  background: rgba(var(--dzt-scrim-rgb, 5, 4, 8), 0.45);
}

.designer[data-layout="phone"] .dz-banners {
  top: calc(62px + env(safe-area-inset-top));
  left: calc(8px + var(--dz-safe-left));
  right: calc(8px + var(--dz-safe-right));
}

.designer[data-layout="phone"] .dz-devices-slot {
  left: var(--dz-safe-left);
  right: var(--dz-safe-right);
  bottom: calc(66px + env(safe-area-inset-bottom) + var(--dz-dock-h, 0px));
}

/* On phones the dock sits right above the bottom tool bar, across the whole width. */
.designer[data-layout="phone"] .dz-dock-slot {
  left: var(--dz-safe-left);
  right: var(--dz-safe-right);
  bottom: calc(62px + env(safe-area-inset-bottom));
}

.designer[data-layout="phone"].has-keyboard .dz-dock-slot {
  visibility: hidden;
}

.designer[data-layout="phone"] .dz-devices {
  border-radius: 14px;
  margin: 0 6px;
}

.designer[data-layout="phone"] .dz-toasts {
  bottom: calc(76px + env(safe-area-inset-bottom));
}

.designer[data-layout="phone"] .dz-dialog {
  top: auto;
  bottom: var(--dz-keyboard);
  left: 0;
  width: 100%;
  max-height: calc(100dvh - var(--dz-keyboard) - var(--dz-safe-top) - 8px);
  padding: 0 var(--dz-safe-right) env(safe-area-inset-bottom) var(--dz-safe-left);
  border-radius: 18px 18px 0 0;
  transform: translateY(16px);
}

.designer[data-layout="phone"] .dz-dialog.is-open {
  transform: none;
}

.designer[data-layout="phone"] .dz-dialog.is-full {
  height: calc(100dvh - var(--dz-keyboard) - var(--dz-safe-top) - 8px);
}

.designer[data-layout="phone"] .dz-dialog-actions .dz-btn {
  flex: 1;
  height: 44px;
}

/* The palette is a sheet from the top on phones, so the keyboard never covers it. */
.designer[data-layout="phone"] .dz-palette {
  top: 0;
  width: 100%;
  max-height: calc(100dvh - var(--dz-keyboard) - 8px);
  padding: var(--dz-safe-top) var(--dz-safe-right) 0 var(--dz-safe-left);
  border-width: 0 0 1px;
  border-radius: 0 0 18px 18px;
}

/* iPhone Safari zooms the whole page into a field whose text is under 16 px (and the editor keeps the page from being
   pinched back): on touch phones every field types at 16 px. */
@media (pointer: coarse) {
  .designer[data-layout="phone"] :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), textarea, select) {
    font-size: 16px;
  }
}

/* While the on-screen keyboard is up on a phone the bottom bar rests (the field being edited needs the room). */
.designer[data-layout="phone"].has-keyboard .dz-toolbar,
.designer[data-layout="phone"].has-keyboard .dz-devices-slot {
  visibility: hidden;
}

.designer[data-layout="phone"] .dz-palette-item {
  min-height: 44px;
}

.designer[data-layout="phone"] .dz-palette-foot {
  display: none;
}

.designer[data-layout="phone"] .dz-projects-foot {
  grid-template-columns: minmax(0, 1fr);
}

.designer[data-layout="phone"] .dz-projects-foot-actions {
  justify-items: start;
}

.designer[data-layout="phone"] .dz-projects-top .dz-privacy > span,
.designer[data-layout="phone"] .dz-projects-back > span {
  display: none;
}

.designer[data-layout="phone"] .dz-projects-top .dz-privacy,
.designer[data-layout="phone"] .dz-projects-back.dz-btn {
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0;
}

.designer[data-layout="phone"] :is(.dz-projects-links, .dz-privacy-more) a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.designer[data-layout="phone"] .dz-projects-actions {
  width: 100%;
}

.designer[data-layout="phone"] .dz-projects-actions .dz-btn {
  flex: 1;
  height: 44px;
}

.designer[data-layout="phone"] .dz-slice-main {
  grid-template-columns: minmax(0, 1fr);
}

.designer[data-layout="phone"] .dz-sel-name.dz-input {
  height: 44px;
}

.designer[data-layout="phone"] .dz-sel-head .dz-sel-icon {
  width: 40px;
  height: 40px;
}

.designer[data-layout="phone"] .dz-prop-label {
  width: 86px;
}

.designer[data-layout="phone"] .dz-switch input {
  width: 36px;
  height: 22px;
}

.designer[data-layout="phone"] .dz-switch input::after {
  width: 18px;
  height: 18px;
}

.designer[data-layout="phone"] .dz-switch input:checked::after {
  transform: translateX(14px);
}

.designer[data-layout="phone"] .dz-cp-area {
  height: 180px;
}

.designer[data-layout="phone"] .dz-cp-hue,
.designer[data-layout="phone"] .dz-cp-alpha {
  height: 20px;
}

/* The sliders look 20 px tall but take a 44 px touch; the gap keeps the two touch areas apart. */
.designer[data-layout="phone"] :is(.dz-cp-hue, .dz-cp-alpha)::before {
  content: "";
  position: absolute;
  inset: -12px 0;
}

.designer[data-layout="phone"] .dz-cp-tracks {
  gap: 24px;
  padding: 12px 0;
}

.designer[data-layout="phone"] .dz-cp-knob {
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
}

.designer[data-layout="phone"] .dz-cp-swatches {
  grid-template-columns: repeat(6, 1fr);
}

.designer[data-layout="phone"] .dz-ge-stop {
  width: 22px;
  height: 22px;
  margin-left: -11px;
}

.designer[data-layout="phone"] .dz-ge-track {
  height: 26px;
}

.designer[data-layout="phone"] .dz-ge-row .dz-ge-swatch {
  width: 32px;
  height: 32px;
}



/* Blur costs a lot on small GPUs: lighter on tablets, none on phones (solid glass colors instead). */
.designer[data-layout="tablet"] {
  --dz-blur: blur(10px) saturate(140%);
}

.designer[data-layout="phone"] {
  --dz-blur: none;
  --dz-surface: rgba(19, 16, 27, 0.97);
  --dz-surface-strong: rgba(22, 19, 31, 0.98);
}

@media (prefers-reduced-transparency: reduce) {
  .designer {
    --dz-blur: none;
    --dz-surface: #15121d;
    --dz-surface-strong: #19161f;
  }

  .dz-backdrop {
    background: rgba(var(--dzt-scrim-rgb, 5, 4, 8), 0.72);
  }
}

/* Less motion when asked. */
@media (prefers-reduced-motion: reduce) {
  .designer *,
  .designer *::before,
  .designer *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  .dz-project-card:hover {
    transform: none;
  }
}

/* Windows high contrast: keep focus and selection visible. */
@media (forced-colors: active) {
  .dz-layer-row.is-selected,
  .dz-menu-item.is-active,
  .dz-palette-item.is-active,
  .dz-tool.is-active,
  .dz-frame-size.is-current {
    outline: 2px solid Highlight;
  }
}

/* ============================================================================================================
   9. Frames on the canvas: the empty canvas's start card, the Frame tool's sizes, the Roblox screen
      switch and the layers panel's Roblox badge
   ============================================================================================================ */

/* A size's shape: a small outline with the size's width to height (--dz-ratio, set from code). */
.dz-aspect {
  --dz-aspect-box: 16px;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--dz-aspect-box);
  height: var(--dz-aspect-box);
  color: var(--text-3);
  transition: color var(--dz-fast) var(--dz-ease);
}

.dz-aspect::before {
  content: "";
  display: block;
  width: min(100%, calc(var(--dz-aspect-box) * var(--dz-ratio, 1)));
  max-height: 100%;
  aspect-ratio: var(--dz-ratio, 1);
  border: 1.5px solid currentColor;
  border-radius: 3px;
}

.dz-aspect.is-roblox {
  color: var(--dz-roblox);
}

.dz-aspect.is-roblox::before {
  background: var(--dz-roblox-soft);
}

.dz-aspect.is-big {
  --dz-aspect-box: 34px;
}

.dz-aspect.is-big::before {
  border-width: 2px;
  border-radius: 5px;
}

/* ---------- the start card ---------- */
.dz-chrome > .dz-start {
  position: absolute;
  top: var(--dz-start-top, 0px);
  right: var(--dz-start-right, 0px);
  bottom: var(--dz-start-bottom, 0px);
  left: var(--dz-start-left, 0px);
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 16px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  /* Fades out, then hides; shows at once (so the keyboard can reach it right away), then fades in. */
  transition: opacity 200ms var(--dz-ease), visibility 0s linear 200ms;
}

.dz-chrome > .dz-start.is-shown {
  opacity: 1;
  visibility: visible;
  transition: opacity 200ms var(--dz-ease), visibility 0s;
}

.dz-start-card {
  container-type: inline-size;
  display: grid;
  gap: 16px;
  width: min(580px, 100%);
  max-height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 22px 22px 16px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 70% at 0% 0%, rgba(var(--dzt-accent-rgb, 255, 92, 168), calc(0.09 * var(--dzt-glow, 1))), transparent 60%),
    radial-gradient(90% 60% at 100% 100%, rgba(var(--dzt-cyan-rgb, 92, 225, 245), calc(0.05 * var(--dzt-glow, 1))), transparent 70%),
    var(--dz-surface);
  -webkit-backdrop-filter: var(--dz-blur);
  backdrop-filter: var(--dz-blur);
  box-shadow: var(--dz-shadow-float);
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.16) transparent;
  pointer-events: auto;
  transform: translateY(8px) scale(0.985);
  transition: transform 280ms var(--dz-ease);
}

.dz-start.is-shown .dz-start-card {
  transform: none;
}

/* While it fades away (and a file dragged over the window) the card lets everything through to the canvas. */
.dz-start:not(.is-shown) .dz-start-card,
.dz-start.is-passing .dz-start-card {
  pointer-events: none;
}

.dz-start-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.dz-start-head {
  display: grid;
  gap: 4px;
}

.dz-start-title {
  color: var(--text);
  font: 650 20px/1.2 var(--font-display);
  letter-spacing: -0.02em;
}

.dz-start-sub {
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.45;
}

.dz-start-sizes {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.dz-start-size {
  display: grid;
  grid-template-rows: 44px auto;
  justify-items: center;
  align-content: start;
  gap: 8px;
  min-width: 0;
  min-height: 112px;
  padding: 14px 6px 12px;
  border: 1px solid var(--dz-line-strong);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.05), rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.02));
  color: var(--text-2);
  text-align: center;
  cursor: var(--nc-hand, pointer);
  transition: border-color var(--dz-fast) var(--dz-ease), background-color var(--dz-fast) var(--dz-ease), color var(--dz-fast) var(--dz-ease), transform 200ms var(--dz-ease), box-shadow var(--dz-fast) var(--dz-ease);
}

.dz-start-size:hover {
  border-color: var(--glass-border-hover);
  background: linear-gradient(180deg, rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.09), rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.04));
  color: var(--text);
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.9);
  transform: translateY(-2px);
}

.dz-start-size:hover .dz-aspect:not(.is-roblox) {
  color: var(--text-2);
}

.dz-start-size:active {
  transform: translateY(0) scale(0.98);
}

/* (A Roblox screen is one size among the others: only its small pink shape, .dz-aspect.is-roblox, tells it apart.) */
.dz-start-size-shape {
  display: grid;
  place-items: center;
}

.dz-start-size-text {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.dz-start-size-name {
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}

.dz-start-size-dims {
  color: var(--text-3);
  font: 500 10.5px/1.2 var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dz-start-or {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2px 6px;
  color: var(--text-3);
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
}

.dz-start-tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 7px 0 8px;
  border: 1px solid var(--dz-line-strong);
  border-radius: 8px;
  background: rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.05);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 650;
  cursor: var(--nc-hand, pointer);
  transition: border-color var(--dz-fast) var(--dz-ease), background-color var(--dz-fast) var(--dz-ease);
}

.dz-start-tool:hover {
  border-color: var(--glass-border-hover);
  background: rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.09);
}

.dz-start-key {
  margin-left: 2px;
}

.dz-start-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 8px;
  padding-top: 10px;
  border-top: 1px solid var(--dz-line);
}

.dz-start-import,
.dz-start-blank {
  color: var(--text-2);
}

/* A narrow free area (a tablet with a panel open, a phone): the sizes become rows. */
@container (max-width: 500px) {
  .dz-start-sizes {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .dz-start-size {
    grid-template-rows: none;
    grid-template-columns: 40px minmax(0, 1fr);
    justify-items: start;
    align-items: center;
    align-content: center;
    gap: 12px;
    min-height: 52px;
    padding: 6px 12px;
    text-align: left;
  }

  .dz-start-size-text {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 10px;
    width: 100%;
  }

  .dz-start-size-name {
    font-size: 13px;
  }

  .dz-start-size .dz-aspect.is-big {
    --dz-aspect-box: 26px;
  }

  .dz-start-size:hover {
    transform: none;
  }
}

/* A short free area (a phone on its side, a small window): everything a little tighter. */
@media (max-height: 560px) {
  .dz-start-card {
    gap: 10px;
    padding: 14px 16px 10px;
  }

  .dz-start-title {
    font-size: 17px;
  }

  .dz-start-size {
    grid-template-rows: 36px auto;
    min-height: 92px;
    padding: 10px 6px 8px;
  }

  .dz-start-size .dz-aspect.is-big {
    --dz-aspect-box: 28px;
  }
}

/* A phone on its side: no subtitle, smaller sizes, and the Frame tool and Import side by side, so it all fits. */
@media (max-height: 430px) {
  .dz-start-card {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    row-gap: 8px;
    padding: 12px 14px;
  }

  .dz-start-head,
  .dz-start-sizes {
    grid-column: 1 / -1;
  }

  .dz-start-sub {
    display: none;
  }

  .dz-start-size {
    grid-template-rows: 28px auto;
    gap: 4px;
    min-height: 0;
    padding: 8px 4px 7px;
  }

  .dz-start-size-name {
    font-size: 11.5px;
  }

  .dz-start-size .dz-aspect.is-big {
    --dz-aspect-box: 24px;
  }

  .dz-start-or {
    justify-content: flex-start;
    text-align: left;
  }

  .dz-start-foot {
    align-items: center;
    padding-top: 0;
    border-top: 0;
  }
}

/* ---------- the Frame tool's sizes (the Design tab while the tool is on) ---------- */
.dz-frames-view {
  display: grid;
}

.dz-frames-head {
  gap: 8px;
}

/* The head already ends with a line. */
.dz-frames-head + .dz-section {
  border-top: 0;
}

.dz-sel-icon.is-frame-tool {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.dz-sel-icon.is-screen {
  border-color: var(--dz-roblox-line);
  background: var(--dz-roblox-soft);
  color: var(--dz-roblox);
}

.dz-frames-lead {
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
}

.dz-frames-new {
  justify-self: start;
}

.dz-frames-group .dz-section-body {
  gap: 4px;
  padding: 0 6px 10px;
}

.dz-frames-note {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 6px 4px;
}

.dz-frames-note .dz-icon {
  width: 14px;
  height: 14px;
  color: var(--dz-roblox);
}

.dz-frames-list {
  display: grid;
  gap: 1px;
}

.dz-frame-size {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--dz-row-h);
  padding: 0 8px;
  border: 0;
  border-radius: var(--dz-r-sm);
  background: transparent;
  color: var(--text-2);
  font-size: var(--dz-fs);
  font-weight: 600;
  text-align: left;
  cursor: var(--nc-hand, pointer);
  transition: background-color var(--dz-fast) var(--dz-ease), color var(--dz-fast) var(--dz-ease);
}

.dz-frame-size:hover {
  background: var(--dz-hover-bg);
  color: var(--text);
}

.dz-frame-size:hover .dz-aspect:not(.is-roblox) {
  color: var(--text-2);
}

.dz-frame-size:active {
  background: var(--dz-press);
}

.dz-frame-size.is-current {
  background: var(--dz-selected);
  color: var(--text);
}

.dz-frame-size-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dz-frame-size-dims {
  flex: none;
  color: var(--text-3);
  font: 500 11px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ---------- the Roblox screen switch (top of the Design tab): one compact row ---------- */
.dz-section.dz-screen-switch {
  border-top: 0;
}

/* (More specific than the sections' own "everything after the head is a grid" rule.) --dz-switch-row is the height of
   the row a finger or pointer uses (bigger on touch screens). */
.dz-section.dz-screen-switch > .dz-screen-switch-body {
  --dz-switch-row: 28px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: calc(var(--dz-switch-row) + 16px);
  padding: 8px 12px;
}

.dz-screen-switch-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--dz-line);
  border-radius: 7px;
  background: rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.04);
  color: var(--text-3);
  transition: border-color var(--dz-fast) var(--dz-ease), background-color var(--dz-fast) var(--dz-ease), color var(--dz-fast) var(--dz-ease);
}

.dz-screen-switch-icon .dz-icon {
  width: 14px;
  height: 14px;
}

.dz-screen-switch.is-on .dz-screen-switch-icon {
  border-color: var(--dz-roblox-line);
  background: var(--dz-roblox-soft);
  color: var(--dz-roblox);
}

.dz-screen-switch-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dz-switch.dz-screen-switch-toggle {
  flex: none;
  justify-content: center;
  min-height: var(--dz-switch-row);
}

.dz-screen-switch.is-unavailable .dz-screen-switch-title {
  color: var(--text-3);
}

.dz-screen-switch.is-unavailable .dz-screen-switch-toggle {
  cursor: var(--nc-arrow, default);
}

.dz-screen-switch.is-unavailable .dz-screen-switch-toggle input {
  cursor: var(--nc-arrow, default);
  opacity: 0.5;
}

/* ---------- a small "?" that explains in one line (instead of a paragraph) ---------- */
.dz-help-tip-wrap {
  flex: none;
  display: inline-flex;
}

.dz-help-tip {
  position: relative;
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid var(--dz-line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--text-3);
  font: 700 10.5px/1 var(--font-display);
  cursor: help;
  transition: color var(--dz-fast) var(--dz-ease), border-color var(--dz-fast) var(--dz-ease), background-color var(--dz-fast) var(--dz-ease);
}

.dz-help-tip:hover,
.dz-help-tip[aria-expanded="true"] {
  border-color: var(--glass-border-hover);
  background: var(--dz-hover-bg);
  color: var(--text);
}

.designer .dz-help-tip:focus-visible {
  border-radius: 50%;
}

/* It looks 18 px but takes a bigger touch (32 px on tablets, 44 px on phones). */
.dz-help-tip::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
}

@media (pointer: coarse) {
  .designer:not([data-layout="phone"]) .dz-help-tip::before {
    inset: -7px;
  }
}

.designer[data-layout="phone"] .dz-help-tip::before {
  inset: -13px;
}

.dz-pop.is-tip {
  max-width: min(280px, calc(100vw - 16px));
}

.dz-help-tip-text {
  padding: 10px 12px;
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.5;
}

.dz-sheet .dz-help-tip-text {
  padding: 0 16px 12px;
  font-size: 14px;
}

/* ---------- calm by default: the Design panel's compact rows ---------- */
/* Opacity, corner radius and "a radius per corner" on one row. */
.dz-appearance-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
}

/* "More text options": a quiet row that opens the rest; a dot when something there is set. */
.dz-more-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: var(--dz-h);
  margin: 2px 0 -2px;
  padding: 0 6px 0 2px;
  border: 0;
  border-radius: var(--dz-r-sm);
  background: transparent;
  color: var(--text-2);
  font-size: var(--dz-fs-sm);
  font-weight: 700;
  text-align: left;
  cursor: var(--nc-hand, pointer);
}

.dz-more-toggle:hover {
  background: var(--dz-hover-bg);
  color: var(--text);
}

.dz-more-chevron {
  width: 14px;
  height: 14px;
  color: var(--text-3);
  transform: rotate(-90deg);
  transition: transform var(--dz-fast) var(--dz-ease);
}

.dz-more-toggle[aria-expanded="true"] .dz-more-chevron {
  transform: none;
}

.dz-more-dot {
  display: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-2);
}

.dz-more-toggle.has-values .dz-more-dot {
  display: block;
}

.dz-more {
  display: grid;
  gap: 8px;
}

.dz-more[hidden] {
  display: none;
}

/* The blend mode button lights up when a layer blends. */
.dz-section-actions .dz-btn.is-active {
  color: var(--accent-ink);
}

/* ---------- the layers panel: Roblox screens ---------- */
.dz-layer-row.is-screen .dz-layer-icon {
  color: var(--dz-roblox);
}

.dz-layer-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 5px;
  border: 1px solid var(--dz-line-strong);
  border-radius: 999px;
  color: var(--text-3);
  font: 700 9px/1 var(--font-body);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.dz-layer-row.is-selected .dz-layer-badge {
  border-color: var(--accent-line);
  color: var(--accent-ink);
}

/* Roblox classes in Roblox screens (ui/lib/explorer.js): icons colored by kind, like Studio's Explorer, also on
   selected rows. */
.dz-layer-row .dz-layer-icon[data-kind="frame"] {
  color: var(--dzt-layer-frame, #f2a25e);
}

.dz-layer-row .dz-layer-icon[data-kind="text"] {
  color: var(--dzt-layer-text, #86b5ff);
}

.dz-layer-row .dz-layer-icon[data-kind="image"] {
  color: var(--dzt-layer-image, #6fd28d);
}

.dz-layer-row .dz-layer-icon[data-kind="screen"] {
  color: var(--dz-roblox);
}

/* ---------- touch: bigger targets (tablets 36 px and more, phones 44 px and more) ---------- */
@media (pointer: coarse) {
  .designer:not([data-layout="phone"]) :is(.dz-start-tool, .dz-frame-size) {
    min-height: 40px;
  }

  .designer:not([data-layout="phone"]) .dz-section.dz-screen-switch > .dz-screen-switch-body {
    --dz-switch-row: 40px;
  }
}

.designer[data-layout="phone"] :is(.dz-start-tool, .dz-frame-size) {
  min-height: 48px;
}

.designer[data-layout="phone"] .dz-section.dz-screen-switch > .dz-screen-switch-body {
  --dz-switch-row: 48px;
}

.designer[data-layout="phone"] .dz-switch.dz-screen-switch-toggle {
  min-width: 48px;
}

.designer[data-layout="phone"] .dz-more-toggle {
  min-height: 44px;
  font-size: 13px;
}

@media (min-height: 431px) {
  .designer[data-layout="phone"] .dz-start-size {
    min-height: 56px;
  }

  .designer[data-layout="phone"] .dz-start-card {
    padding: 18px 16px 12px;
  }
}

.designer[data-layout="phone"] .dz-chrome > .dz-start {
  padding: 12px max(12px, var(--dz-safe-right)) 12px max(12px, var(--dz-safe-left));
}

.designer[data-layout="phone"] .dz-frame-size {
  font-size: 14px;
}

.designer[data-layout="phone"] .dz-frame-size-dims {
  font-size: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .dz-start-size:hover {
    transform: none;
  }
}

/* ============================================================================================================
   10. Help and the tour: the round ? button, Help & questions, the first-run question, the tour's spotlight and card
   ============================================================================================================ */

/* The safe areas, read from code (ui/index.js shell.safeArea): env() values as padding. */
.dz-safe-probe {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  visibility: hidden;
  pointer-events: none;
}

/* ---------- the ? mark ---------- */
.dz-help-glyph {
  display: inline-grid;
  place-items: center;
  font: 700 15px/1 var(--font-display);
  letter-spacing: 0;
}

/* Inline, as in "You can always find it under ?": a small round badge like the button. */
.dz-help-glyph.is-inline {
  width: 20px;
  height: 20px;
  border: 1px solid var(--glass-border-hover);
  border-radius: 50%;
  background: rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.06);
  color: var(--text);
  font-size: 11.5px;
  vertical-align: middle;
}

/* ---------- the floating ? (computers and tablets): bottom right of the free canvas ---------- */
.dz-chrome > .dz-help-button {
  position: absolute;
  left: var(--dz-help-x, calc(100% - 46px - var(--dz-safe-right)));
  top: var(--dz-help-y, calc(100% - 52px - var(--dz-safe-bottom)));
  z-index: 3;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  background: var(--dz-surface);
  -webkit-backdrop-filter: var(--dz-blur);
  backdrop-filter: var(--dz-blur);
  box-shadow: var(--dz-shadow-float);
  color: var(--text-2);
  cursor: var(--nc-hand, pointer);
  transition: color var(--dz-fast) var(--dz-ease), border-color var(--dz-fast) var(--dz-ease), background-color var(--dz-fast) var(--dz-ease), transform 120ms var(--dz-ease);
}

/* Placed once (ui/help.js), it glides with the panels as they open and close. */
.dz-chrome > .dz-help-button.is-placed {
  transition: left 260ms var(--dz-ease), top 260ms var(--dz-ease), color var(--dz-fast) var(--dz-ease), border-color var(--dz-fast) var(--dz-ease), background-color var(--dz-fast) var(--dz-ease), transform 120ms var(--dz-ease);
}

.dz-chrome > .dz-help-button:hover {
  border-color: var(--glass-border-hover);
  color: var(--text);
}

.dz-chrome > .dz-help-button:active {
  transform: scale(0.94);
}

.dz-chrome > .dz-help-button:focus-visible {
  border-radius: 50%;
  outline-offset: 2px;
}

.designer[data-layout="phone"] .dz-chrome > .dz-help-button {
  display: none;
}

@media (pointer: coarse) {
  .designer:not([data-layout="phone"]) .dz-chrome > .dz-help-button {
    width: 42px;
    height: 42px;
  }
}

/* The ? in the phone's top bar. */
.dz-phone-help .dz-help-glyph {
  font-size: 17px;
}

/* Where help lives: a soft ring that pulses twice (after "Skip"). */
.dz-help-button.is-pulsing,
.dz-phone-help.is-pulsing {
  color: var(--accent-ink);
}

@media (prefers-reduced-motion: no-preference) {
  .dz-help-button.is-pulsing,
  .dz-phone-help.is-pulsing {
    animation: dz-help-pulse 1.2s var(--dz-ease) 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dz-help-button.is-pulsing,
  .dz-phone-help.is-pulsing {
    box-shadow: 0 0 0 3px var(--accent-line);
  }
}

@keyframes dz-help-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--dzt-accent-rgb, 255, 92, 168), 0.55), var(--dz-shadow-float);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(var(--dzt-accent-rgb, 255, 92, 168), 0), var(--dz-shadow-float);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(var(--dzt-accent-rgb, 255, 92, 168), 0), var(--dz-shadow-float);
  }
}

/* The projects screen's Help. */
.dz-projects-top .dz-projects-help {
  height: 30px;
  padding: 0 10px 0 7px;
  gap: 6px;
  font-size: var(--dz-fs-sm);
}

.dz-projects-help .dz-help-glyph {
  width: 18px;
  height: 18px;
  border: 1px solid var(--glass-border-hover);
  border-radius: 50%;
  font-size: 11px;
}

.designer[data-layout="phone"] .dz-projects-help > span:not(.dz-help-glyph) {
  display: none;
}

.designer[data-layout="phone"] .dz-projects-top .dz-projects-help {
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0;
}

/* ---------- Help & questions ---------- */
.dz-dialog.dz-help-dialog {
  height: min(700px, calc(100vh - 48px));
  height: min(700px, calc(100dvh - 48px - var(--dz-keyboard)));
}

.designer[data-layout="phone"] .dz-dialog.dz-help-dialog {
  height: calc(100dvh - var(--dz-keyboard) - var(--dz-safe-top) - 8px);
}

.dz-help-dialog .dz-dialog-body {
  padding-top: 0;
}

.dz-help {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
}

/* The search and the topics stay at the top while the answers scroll. */
.dz-help-top {
  position: sticky;
  top: 0;
  z-index: 1;
  display: grid;
  gap: 8px;
  margin: 0 -20px;
  padding: 6px 20px 10px;
  background: linear-gradient(180deg, var(--dz-surface-solid) 82%, rgba(var(--dzt-solid-rgb, 20, 17, 28), 0));
}

.dz-help-searchbox {
  margin: 0;
}

.dz-help-search.dz-input {
  height: 36px;
  border-color: var(--dz-line-strong);
  border-radius: 10px;
  font-size: 13px;
}

.dz-help-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dz-help-chip {
  height: 28px;
  padding: 0 11px;
  border: 1px solid var(--dz-line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-size: var(--dz-fs);
  font-weight: 650;
  white-space: nowrap;
  cursor: var(--nc-hand, pointer);
  transition: background-color var(--dz-fast) var(--dz-ease), border-color var(--dz-fast) var(--dz-ease), color var(--dz-fast) var(--dz-ease);
}

.dz-help-chip:hover {
  background: var(--dz-hover-bg);
  color: var(--text);
}

.dz-help-chip[aria-pressed="true"] {
  border-color: var(--accent-line);
  background: var(--dz-selected);
  color: var(--accent-ink);
}

.dz-help-list {
  display: grid;
  gap: 14px;
}

.dz-help-group,
.dz-help-results {
  display: grid;
  gap: 2px;
}

.dz-help-group-title {
  padding: 2px 10px 4px;
  color: var(--text-3);
  font: 700 10.5px/1.2 var(--font-body);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.dz-help-item {
  border-radius: 12px;
  transition: background-color var(--dz-fast) var(--dz-ease);
}

.dz-help-item:has(> .dz-help-question[aria-expanded="true"]) {
  background: rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.035);
}

.dz-help-question {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
  text-align: left;
  cursor: var(--nc-hand, pointer);
}

.dz-help-question:hover {
  background: var(--dz-hover-bg);
}

.dz-help-question-text {
  flex: 1;
  min-width: 0;
}

.dz-help-question-group {
  flex: none;
  color: var(--text-3);
  font-size: var(--dz-fs-sm);
  font-weight: 600;
}

.dz-help-chevron {
  flex: none;
  color: var(--text-3);
  transition: transform var(--dz-fast) var(--dz-ease);
}

.dz-help-question[aria-expanded="true"] .dz-help-chevron {
  transform: rotate(180deg);
}

.dz-help-answer {
  display: grid;
  gap: 10px;
  padding: 0 10px 12px;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.55;
}

.dz-help-answer[hidden] {
  display: none;
}

.dz-help-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dz-help-empty {
  padding: 36px 12px;
}

.dz-help-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--dz-line);
}

.dz-help-external {
  width: 13px;
  height: 13px;
  color: var(--text-3);
}

/* Touch screens: a 16 px search (no zoom on iPhone), bigger rows; phones: the topics scroll sideways. */
@media (pointer: coarse) {
  .dz-help-search.dz-input {
    height: 44px;
    font-size: 16px;
  }

  .dz-help-chip {
    height: 36px;
  }

  .dz-help-question {
    min-height: 48px;
  }
}

.designer[data-layout="phone"] .dz-help-chips {
  flex-wrap: nowrap;
  margin: 0 -20px;
  padding: 0 20px 2px;
  overflow-x: auto;
  scrollbar-width: none;
}

.designer[data-layout="phone"] .dz-help-chips::-webkit-scrollbar {
  display: none;
}

.designer[data-layout="phone"] .dz-help-chip {
  flex: none;
  height: 44px;
  padding: 0 14px;
  font-size: 13px;
}

.designer[data-layout="phone"] .dz-help-question {
  min-height: 52px;
  font-size: 14px;
}

.designer[data-layout="phone"] .dz-help-answer {
  font-size: 14px;
}

.designer[data-layout="phone"] .dz-help-actions .dz-btn,
.designer[data-layout="phone"] .dz-help-foot .dz-btn {
  height: 44px;
}

/* ---------- the first-run question ---------- */
.dz-backdrop.is-question {
  background: rgba(var(--dzt-scrim-rgb, 5, 4, 8), 0.46);
}

.dz-tour-ask {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 8px;
  width: min(380px, calc(100vw - 32px - var(--dz-safe-left) - var(--dz-safe-right)));
  max-height: calc(100dvh - 24px);
  overflow: auto;
  padding: 26px 24px 18px;
  border: 1px solid var(--glass-border-hover);
  border-radius: 22px;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(var(--dzt-accent-rgb, 255, 92, 168), calc(0.09 * var(--dzt-glow, 1))), transparent 62%),
    radial-gradient(90% 60% at 100% 100%, rgba(var(--dzt-cyan-rgb, 92, 225, 245), calc(0.05 * var(--dzt-glow, 1))), transparent 70%),
    var(--dz-surface-strong);
  -webkit-backdrop-filter: var(--dz-blur);
  backdrop-filter: var(--dz-blur);
  box-shadow: var(--dz-shadow-pop);
  text-align: center;
  transform: translate(-50%, -46%) scale(0.96);
  transition: opacity 220ms var(--dz-ease), transform 320ms var(--dz-ease);
}

.dz-tour-ask.is-open {
  transform: translate(-50%, -50%);
}

.dz-tour-ask.is-closing {
  transform: translate(-50%, -48%) scale(0.98);
}

.dz-tour-ask-logo {
  width: 44px;
  height: 44px;
  margin-bottom: 4px;
  border-radius: 13px;
  box-shadow: 0 0 0 1px rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.08), 0 14px 32px -12px rgba(var(--dzt-accent-rgb, 255, 92, 168), calc(0.65 * var(--dzt-glow, 1)));
}

.dz-tour-ask-title {
  color: var(--text);
  font: 650 19px/1.25 var(--font-display);
  letter-spacing: -0.015em;
}

.dz-tour-ask-text {
  max-width: 32ch;
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.5;
}

.dz-tour-ask-actions {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
}

.dz-tour-ask-actions .dz-btn {
  flex: 1;
  height: 38px;
  border-radius: 11px;
  font-size: 13px;
}

.dz-tour-ask-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 4px;
  color: var(--text-3);
  font-size: 12px;
}

.designer[data-layout="phone"] .dz-tour-ask-actions .dz-btn {
  height: 44px;
  font-size: 14px;
}

/* ---------- the tour: the dimmed window with one part lit ---------- */
.dz-tour {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  opacity: 0;
  touch-action: none;
  transition: opacity 260ms var(--dz-ease);
}

.dz-tour.is-open {
  opacity: 1;
}

.dz-tour.is-closing {
  opacity: 0;
  pointer-events: none;
}

/* The lit part: a rounded hole whose huge shadow dims everything else, with a pink ring. */
.dz-tour-hole {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--dz-hole-w, 0px);
  height: var(--dz-hole-h, 0px);
  border-radius: var(--dz-hole-r, 12px);
  box-shadow:
    0 0 0 2px rgba(var(--dzt-accent-rgb, 255, 92, 168), 0.8),
    0 0 0 7px rgba(var(--dzt-accent-rgb, 255, 92, 168), 0.14),
    0 0 0 200vmax rgba(var(--dzt-scrim-rgb, 5, 4, 8), 0.64);
  transform: translate(var(--dz-hole-x, 50vw), var(--dz-hole-y, 50vh));
  pointer-events: none;
}

.dz-tour.is-placed .dz-tour-hole {
  transition: transform 380ms var(--dz-ease), width 380ms var(--dz-ease), height 380ms var(--dz-ease), border-radius 380ms var(--dz-ease), box-shadow 240ms var(--dz-ease);
}

.dz-tour.is-empty .dz-tour-hole {
  box-shadow:
    0 0 0 0 rgba(var(--dzt-accent-rgb, 255, 92, 168), 0),
    0 0 0 0 rgba(var(--dzt-accent-rgb, 255, 92, 168), 0),
    0 0 0 200vmax rgba(var(--dzt-scrim-rgb, 5, 4, 8), 0.64);
}

/* A slow, soft breath around the lit part. */
.dz-tour-hole::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .dz-tour:not(.is-empty) .dz-tour-hole::after {
    animation: dz-tour-breathe 2.4s var(--ease-in-out) infinite;
  }
}

@keyframes dz-tour-breathe {
  0%,
  100% {
    opacity: 0;
    box-shadow: 0 0 0 0 rgba(var(--dzt-accent-rgb, 255, 92, 168), 0.4);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 0 10px rgba(var(--dzt-accent-rgb, 255, 92, 168), 0);
  }
}

/* ---------- the tour's card ---------- */
.dz-tour-card {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
  display: grid;
  gap: 6px;
  width: var(--dz-tour-w, 320px);
  padding: 14px 14px 12px 16px;
  border: 1px solid var(--glass-border-hover);
  border-radius: 18px;
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(var(--dzt-accent-rgb, 255, 92, 168), calc(0.07 * var(--dzt-glow, 1))), transparent 60%),
    var(--dz-surface-strong);
  -webkit-backdrop-filter: var(--dz-blur);
  backdrop-filter: var(--dz-blur);
  box-shadow: var(--dz-shadow-pop);
  transform: translate(var(--dz-tour-x, 50vw), var(--dz-tour-y, 50vh));
  outline: none;
}

.dz-tour-card:not(.is-placed) {
  transition: opacity 220ms var(--dz-ease);
}

.dz-tour-card.is-placed {
  transition: transform 380ms var(--dz-ease), opacity 220ms var(--dz-ease);
}

.designer .dz-tour-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 18px;
}

/* The arrow points at the lit part from the card's edge (data-arrow: top, bottom, left or right). */
.dz-tour-arrow {
  position: absolute;
  display: none;
  width: 14px;
  height: 14px;
  border: 1px solid transparent;
  background: var(--dz-surface-solid);
  transform: rotate(45deg);
}

.dz-tour-card[data-arrow] .dz-tour-arrow {
  display: block;
}

.dz-tour-card[data-arrow="top"] .dz-tour-arrow {
  top: -8px;
  left: calc(var(--dz-tour-arrow, 50%) - 7px);
  border-top-color: var(--glass-border-hover);
  border-left-color: var(--glass-border-hover);
  border-top-left-radius: 3px;
}

.dz-tour-card[data-arrow="bottom"] .dz-tour-arrow {
  bottom: -8px;
  left: calc(var(--dz-tour-arrow, 50%) - 7px);
  border-right-color: var(--glass-border-hover);
  border-bottom-color: var(--glass-border-hover);
  border-bottom-right-radius: 3px;
}

.dz-tour-card[data-arrow="left"] .dz-tour-arrow {
  left: -8px;
  top: calc(var(--dz-tour-arrow, 50%) - 7px);
  border-left-color: var(--glass-border-hover);
  border-bottom-color: var(--glass-border-hover);
  border-bottom-left-radius: 3px;
}

.dz-tour-card[data-arrow="right"] .dz-tour-arrow {
  right: -8px;
  top: calc(var(--dz-tour-arrow, 50%) - 7px);
  border-top-color: var(--glass-border-hover);
  border-right-color: var(--glass-border-hover);
  border-top-right-radius: 3px;
}

.dz-tour-card.is-placed .dz-tour-arrow {
  transition: left 380ms var(--dz-ease), top 380ms var(--dz-ease);
}

.dz-tour-top {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 24px;
}

.dz-tour-badge {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--dz-line);
  border-radius: 8px;
  background: rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.04);
  color: var(--text-2);
}

.dz-tour-badge .dz-icon {
  width: 15px;
  height: 15px;
}

.dz-tour-dots {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.dz-tour-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.16);
  transition: width 260ms var(--dz-ease), background-color 260ms var(--dz-ease);
}

.dz-tour-dot.is-done {
  background: var(--text-3);
}

.dz-tour-dot.is-current {
  width: 16px;
  background: var(--accent);
}

.dz-tour-count {
  flex: none;
  color: var(--text-3);
  font: 500 11px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.dz-tour-title {
  margin-top: 4px;
  color: var(--text);
  font: 650 15px/1.3 var(--font-display);
  letter-spacing: -0.01em;
}

.dz-tour-text {
  max-height: calc(var(--dz-tour-max-h, 100vh) - 110px);
  overflow: auto;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.5;
}

.dz-tour-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
}

.dz-tour-nav {
  display: flex;
  gap: 6px;
}

.dz-tour-actions .dz-btn {
  height: 30px;
  padding: 0 12px;
  border-radius: 9px;
  font-size: 12px;
}

.dz-tour-actions .dz-tour-skip {
  margin-left: -6px;
  padding: 0 8px;
  color: var(--text-3);
}

.dz-tour-next {
  gap: 4px;
}

.dz-tour-next .dz-tour-next-icon {
  width: 14px;
  height: 14px;
  margin-right: -4px;
}

.dz-tour-next.is-last .dz-tour-next-icon {
  display: none;
}

/* Moving to another step: the words fade in; a tap on the dimmed part: the card nods. */
@media (prefers-reduced-motion: no-preference) {
  .dz-tour-card.is-stepping :is(.dz-tour-title, .dz-tour-text) {
    animation: dz-tour-words 300ms var(--dz-ease);
  }

  .dz-tour-card.is-nudged {
    animation: dz-tour-nudge 420ms var(--dz-ease);
  }
}

@keyframes dz-tour-words {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes dz-tour-nudge {
  0%,
  100% {
    box-shadow: var(--dz-shadow-pop);
  }
  40% {
    box-shadow: var(--dz-shadow-pop), 0 0 0 4px rgba(var(--dzt-accent-rgb, 255, 92, 168), 0.35);
  }
}

/* Touch screens: bigger buttons; phones: 44 px and more for everything a finger uses. */
@media (pointer: coarse) {
  .designer:not([data-layout="phone"]) .dz-tour-actions .dz-btn {
    height: 36px;
  }
}

.designer[data-layout="phone"] .dz-tour-card {
  padding: 14px 14px 12px 16px;
  border-radius: 20px;
}

.designer[data-layout="phone"] .dz-tour-title {
  font-size: 16px;
}

.designer[data-layout="phone"] .dz-tour-text {
  font-size: 14px;
}

.designer[data-layout="phone"] .dz-tour-actions .dz-btn {
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  font-size: 13px;
}

/* Windows high contrast: no shadows there, so the lit part gets an outline instead. */
@media (forced-colors: active) {
  .dz-tour-hole {
    outline: 3px solid Highlight;
  }

  .dz-tour-card,
  .dz-tour-ask {
    border: 2px solid CanvasText;
  }
}

/* Layout guide rows (Design tab): the kind's icon in the guide's own color, then its short name. */
.dz-guide-open {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dz-guide-kind {
  flex: none;
  display: inline-flex;
  color: var(--guide-color, var(--text-2));
  opacity: 0.85;
}

.dz-prop-controls > .dz-guide-auto {
  flex: none;
}

/* Auto layout extras (Design tab): a grid's column and row rows (the kind's icon, then its size), the track settings'
   kind in the popover head, the layout settings popover, the grid cell section and the "ignore auto layout" button. */
.dz-track-lists,
.dz-track-block {
  display: grid;
  gap: 4px;
}

.dz-track-lists {
  gap: 6px;
}

.dz-track-open {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dz-track-kind {
  flex: none;
  display: inline-flex;
  color: var(--text-2);
}

.dz-track-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dz-picker-head > .dz-track-type {
  flex: 1;
  min-width: 0;
  font-weight: 650;
}

.dz-layout-more .dz-prop-label {
  width: 62px;
}

.dz-layout-more .dz-seg {
  flex: 1;
}

.dz-section-actions > .dz-ignore-layout[aria-pressed="true"] {
  color: var(--accent);
}

/* On phones their own head (the title, the kind, close) is the sheet's title. */
.dz-sheet:is(.is-track, .is-layout-more) > .dz-sheet-head {
  display: none;
}

.dz-sheet :is(.dz-track-editor, .dz-layout-more-pop) > .dz-picker-head {
  position: static;
  padding: 4px 8px 10px;
}

/* ---------- libraries (ui/libraries/): the Assets panel's library section, the Libraries window, updates ---------- */
.dz-lib-assets {
  margin-top: 2px;
}

.dz-lib-groups {
  display: grid;
  gap: 2px;
  padding: 0 6px;
}

.dz-lib-group-head {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 30px;
  padding: 4px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-2);
  font: 700 var(--dz-fs-sm) / 1.2 var(--font-body);
  text-align: left;
  cursor: var(--nc-hand, pointer);
}

.dz-lib-group-head:hover {
  background: var(--dz-hover-bg);
  color: var(--text);
}

.dz-lib-group-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dz-lib-list {
  padding: 0 0 6px;
}

.dz-lib-none {
  padding: 2px 10px 6px;
}

.dz-lib-row .dz-lib-add {
  flex: none;
  opacity: 0;
  transition: opacity var(--dz-fast) var(--dz-ease);
}

.dz-lib-row:hover .dz-lib-add,
.dz-lib-row:focus-within .dz-lib-add,
.dz-lib-row:focus .dz-lib-add {
  opacity: 1;
}

@media (pointer: coarse) {
  .dz-lib-row .dz-lib-add {
    opacity: 1;
  }
}

.dz-lib-updates {
  color: var(--info);
}

.dz-lib-empty {
  display: grid;
  justify-items: start;
  gap: 6px;
  padding: 2px 14px 10px;
}

/* The Libraries window and the updates window. */
.dz-lib-dialog,
.dz-lib-review {
  display: grid;
  gap: 10px;
}

.dz-lib-mine {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.dz-lib-mine-head,
.dz-lib-review-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.dz-lib-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(var(--dzt-violet-rgb, 185, 140, 255), 0.12);
  color: var(--dz-component);
}

.dz-lib-mine-text,
.dz-lib-item-text {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}

.dz-lib-mine-name,
.dz-lib-item-name {
  overflow: hidden;
  color: var(--text);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dz-lib-meta {
  color: var(--text-3);
  font-size: var(--dz-fs-sm);
}

.dz-lib-changes {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  margin: 0;
  font-size: var(--dz-fs-sm);
}

.dz-lib-changes dt {
  color: var(--text-3);
  font-weight: 700;
}

.dz-lib-changes dd {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  color: var(--text-2);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dz-lib-subtitle {
  margin: 4px 2px 0;
  color: var(--text-2);
  font: 700 var(--dz-fs-sm) / 1.2 var(--font-body);
}

.dz-lib-list-empty {
  padding: 0 2px;
}

.dz-lib-others,
.dz-lib-changes-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dz-lib-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 6px 8px;
  border-radius: 10px;
}

.dz-lib-item:hover {
  background: var(--dz-hover-bg);
}

.dz-lib-item .dz-lib-icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.05);
  color: var(--text-3);
}

.dz-lib-item.is-on .dz-lib-icon {
  background: rgba(var(--dzt-violet-rgb, 185, 140, 255), 0.12);
  color: var(--dz-component);
}

.dz-lib-item > .dz-switch {
  flex: none;
}

.dz-lib-review-group {
  display: grid;
  gap: 6px;
}

.dz-lib-change {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 2px 6px;
  border-radius: 8px;
}

.dz-lib-change > .dz-check {
  flex: 1;
  min-width: 0;
  color: var(--text);
}

.dz-lib-change-icon {
  display: inline-grid;
  place-items: center;
  color: var(--dz-component);
}

.dz-lib-change-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dz-lib-change.is-removed {
  color: var(--text-3);
}

.dz-lib-change.is-removed .dz-lib-change-icon {
  color: var(--text-3);
}

.dz-lib-change.is-removed .dz-lib-meta {
  margin-left: auto;
}

/* Styles from libraries in the style picker. */
.dz-style-library {
  display: grid;
  gap: 2px;
}

.designer[data-layout="phone"] :is(.dz-lib-group-head, .dz-lib-row, .dz-lib-change, .dz-lib-item) {
  min-height: 44px;
}

/* Style swatches (the style picker, Local styles, library styles): a plain color can't be the first of two
   background layers, so the style's paint (a color or a gradient) gets a layer of its own over the checkerboard. */
.dz-style-swatch {
  position: relative;
  overflow: hidden;
  background: var(--dz-checker);
}

.dz-style-swatch::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--swatch, transparent);
}

.dz-style-swatch .dz-icon {
  position: relative;
}

/* Text extras (properties/text.js, type-settings.js): the variable font button next to italic, max lines next to
   "Too long", list buttons, the Link line while letters are edited on the canvas, and the settings popovers. */
.dz-text-style-buttons {
  display: flex;
  gap: 2px;
}

.dz-text-style-buttons > .dz-btn[hidden] {
  display: none;
}

.dz-prop-controls > .dz-number.dz-max-lines {
  flex: 0 0 76px;
}

.dz-prop-controls > .dz-btn.is-icon,
.dz-prop-controls > .dz-link-open {
  flex: none;
}

.dz-prop-controls > .dz-btn[hidden],
.dz-prop-controls > .dz-link-open[hidden] {
  display: none;
}

.dz-link-row[hidden] {
  display: none;
}

.dz-features-button {
  gap: 6px;
}

.dz-pop.is-picker.is-type-settings {
  width: 316px;
}

.dz-type-pop-body {
  display: grid;
  gap: 8px;
  padding: 2px 12px 12px;
}

.dz-type-pop-body > .dz-prop-row > .dz-prop-label {
  width: 72px;
}

.dz-feature-switches {
  gap: 4px 14px;
}

.dz-feature-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.dz-feature-chip {
  min-width: 30px;
  padding: 0 6px;
}

.dz-type-pop-foot {
  display: flex;
  justify-content: flex-end;
}

.dz-type-pop-foot > [hidden] {
  display: none;
}

.dz-wrap-style-seg > button {
  padding: 0 4px;
  font-variant-ligatures: none;
}

.dz-line-style-seg > button {
  padding: 0 3px;
}

/* On phones the text settings are a bottom sheet: their own head (title and close) replaces the sheet's. */
.dz-sheet.is-type-settings .dz-sheet-head {
  display: none;
}

/* The Vector section's Simplify, Offset and Shape builder buttons sit at the end of the row. */
.dz-prop-controls.dz-vector-actions {
  justify-content: flex-end;
}

.dz-prop-controls.dz-vector-actions > * {
  flex: none;
}

/* ---------- selecting and arranging: the aspect ratio lock, constraints, spacing, preferences ---------- */
/* X and Y, then W, H and the lock at the end (ui/properties/layout.js); the first row leaves the lock's column
   empty. In a Roblox screen the W / H menus row has the lock too. */
.dz-prop-grid.has-lock,
.dz-size-modes.has-lock {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--dz-h-sm);
}

.dz-ratio-lock {
  align-self: center;
  color: var(--text-3);
}

/* The constraints: a small diagram (the parent, the layer in its middle, a line per side and two center lines)
   and the two menus beside it (ui/properties/constraints.js). */
.dz-pin-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.dz-pin-fields {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.dz-constraints {
  --dz-cons: 66px;
  position: relative;
  flex: none;
  width: var(--dz-cons);
  height: var(--dz-cons);
  border: 1px solid var(--dz-line-strong);
  border-radius: 8px;
  background: var(--dz-field);
}

.dz-constraints-box {
  position: absolute;
  left: 33.33%;
  top: 33.33%;
  width: 33.34%;
  height: 33.34%;
  border: 1px solid rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.22);
  border-radius: 3px;
  pointer-events: none;
}

.dz-constraint {
  position: absolute;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.24);
  cursor: var(--nc-hand, pointer);
}

.dz-constraint:hover {
  color: rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.6);
}

.dz-constraint[aria-pressed="true"] {
  color: var(--accent);
}

.dz-constraint:disabled {
  cursor: var(--nc-arrow, default);
}

.dz-constraint-line {
  display: block;
  border-radius: 1px;
  background: currentColor;
}

.dz-constraint:is(.is-left, .is-right) {
  top: 33.33%;
  width: 33.33%;
  height: 33.34%;
}

.dz-constraint.is-left {
  left: 0;
}

.dz-constraint.is-right {
  right: 0;
}

.dz-constraint:is(.is-top, .is-bottom) {
  left: 33.33%;
  width: 33.34%;
  height: 33.33%;
}

.dz-constraint.is-top {
  top: 0;
}

.dz-constraint.is-bottom {
  bottom: 0;
}

.dz-constraint:is(.is-left, .is-right) .dz-constraint-line {
  width: 55%;
  height: 2px;
}

.dz-constraint:is(.is-top, .is-bottom) .dz-constraint-line {
  width: 2px;
  height: 55%;
}

/* The center lines cross inside the layer: a vertical one centers it from side to side, a horizontal one from top
   to bottom. */
.dz-constraint.is-center-h {
  left: 41.67%;
  top: 33.33%;
  width: 16.66%;
  height: 33.34%;
}

.dz-constraint.is-center-v {
  left: 33.33%;
  top: 41.67%;
  width: 33.34%;
  height: 16.66%;
}

.dz-constraint.is-center-h .dz-constraint-line {
  width: 2px;
  height: 70%;
}

.dz-constraint.is-center-v .dz-constraint-line {
  width: 70%;
  height: 2px;
}

/* Scale: both lines of the axis, softer (the layer grows with its parent). */
.dz-constraints[data-h="scale"] .dz-constraint:is(.is-left, .is-right),
.dz-constraints[data-v="scale"] .dz-constraint:is(.is-top, .is-bottom) {
  color: rgba(var(--dzt-accent-rgb, 255, 92, 168), 0.55);
}

.dz-constraints[data-h="scale"] .dz-constraint:is(.is-left, .is-right) .dz-constraint-line,
.dz-constraints[data-v="scale"] .dz-constraint:is(.is-top, .is-bottom) .dz-constraint-line {
  opacity: 0.8;
}

@media (pointer: coarse) {
  .dz-constraints {
    --dz-cons: 96px;
  }
}

/* Phones: each part of the diagram is a 44 px touch. */
.designer[data-layout="phone"] .dz-constraints {
  --dz-cons: 132px;
}

/* An evenly spaced selection: its spacing to type, under the align buttons (ui/properties/header.js). */
.dz-smart-spacing {
  margin-top: 2px;
}

/* Preferences > Nudge and snapping (ui/preferences.js). */
.dz-prefs {
  display: grid;
  gap: 8px;
  min-width: min(300px, 100%);
}

.dz-prefs .dz-prop-label {
  width: 96px;
}

.dz-prefs .dz-button-row {
  margin-top: 4px;
}

/* Preferences > Cursor (ui/cursor-prefs.js): the chosen picture's preview on a checkerboard, and a short note. */
.dz-cursor-own {
  display: grid;
  gap: 8px;
}

.dz-prop-controls > .dz-cursor-preview {
  flex: none;
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 6px;
  background: repeating-conic-gradient(rgba(var(--dzt-fg-rgb, 255, 255, 255), 0.14) 0 25%, transparent 0 50%) 0 0 / 8px 8px;
}

.dz-cursor-note {
  margin: 0;
  color: var(--text-3, rgba(255, 255, 255, 0.55));
  font-size: 12px;
}

.dz-cursor-note:empty {
  display: none;
}

/* Preferences > Theme (ui/theme-prefs.js): the choices as small pictures of each theme, then Custom's colors. */
.dz-theme-prefs {
  gap: 12px;
}

.dz-theme-tiles {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

@media (max-width: 520px) {
  .dz-theme-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.dz-theme-tile {
  display: grid;
  gap: 6px;
  padding: 6px 6px 7px;
  border: 1px solid var(--dz-line);
  border-radius: var(--dz-r);
  background: transparent;
  color: var(--text-2);
  font-size: var(--dz-fs-sm);
  font-weight: 650;
  text-align: center;
  cursor: var(--nc-hand, pointer);
  transition: border-color var(--dz-fast) var(--dz-ease), background-color var(--dz-fast) var(--dz-ease);
}

.dz-theme-tile:hover {
  background: var(--dz-hover-bg);
  color: var(--text);
}

.dz-theme-tile[aria-checked="true"] {
  border-color: var(--accent);
  background: var(--dz-selected);
  color: var(--text);
  box-shadow: 0 0 0 1px var(--accent) inset;
}

.dz-theme-tile:focus-visible {
  outline: none;
  box-shadow: var(--dz-ring);
}

.dz-theme-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The picture: the theme's background, a panel with two lines of its text, and its accent. */
.dz-theme-look {
  position: relative;
  display: block;
  height: 46px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--look-bg);
  box-shadow: 0 0 0 1px var(--look-border) inset;
}

.dz-theme-look-panel {
  position: absolute;
  left: 6px;
  top: 6px;
  bottom: 6px;
  display: grid;
  align-content: start;
  gap: 4px;
  width: 52%;
  padding: 6px;
  border: 1px solid var(--look-border);
  border-radius: 4px;
  background: var(--look-panel);
}

.dz-theme-look-line {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: var(--look-text);
  opacity: 0.85;
}

.dz-theme-look-line.is-short {
  width: 60%;
  opacity: 0.5;
}

.dz-theme-look-mark {
  position: absolute;
  right: 7px;
  bottom: 7px;
  width: 16px;
  height: 8px;
  border-radius: 4px;
  background: var(--look-accent);
}

/* Device: half Dark, half Light. */
.dz-theme-look-split {
  position: relative;
  display: block;
  height: 46px;
}

.dz-theme-look-split > .dz-theme-look {
  position: absolute;
  inset: 0;
}

.dz-theme-look-split > .dz-theme-look + .dz-theme-look {
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.dz-theme-custom {
  display: grid;
  gap: 8px;
}

.dz-theme-custom[hidden] {
  display: none;
}

.dz-theme-custom .dz-prop-controls {
  gap: 6px;
}

/* "Start from" names three presets in the panel's width (also on phones). */
.dz-theme-custom .dz-seg {
  flex: 1;
}

.dz-theme-custom .dz-seg > button {
  padding: 0 4px;
}

.dz-theme-hex {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  text-transform: uppercase;
}

.dz-theme-warn,
.dz-theme-note {
  margin: 0;
  color: var(--text-3);
  font-size: 12px;
}

.dz-theme-warn {
  color: var(--warn);
}

.dz-theme-warn[hidden],
.dz-theme-note:empty {
  display: none;
}

/* ============================================================================================================
   Color (docs/designer/notes/d-color.md): the color picker's CSS field and its note, the canvas eyedropper, the
   paint picker's blend button, Selection colors, the file's color profile, color styles with several paints
   ============================================================================================================ */

/* The CSS field takes the whole row and keeps what is typed as typed. */
.dz-cp-inputs.is-css .dz-input {
  text-align: left;
  text-transform: none;
  font-size: 11px;
}

.dz-cp-note {
  margin: -2px 0 0;
  font-size: 11px;
}

/* The eyedropper: a crosshair over the canvas (under the popovers) and a loupe of the pixels under it. */
.dz-eyedropper {
  position: fixed;
  z-index: 0;
  cursor: crosshair;
  touch-action: none;
  outline: none;
}

.dz-eyedropper.is-outside {
  cursor: var(--nc-arrow, default);
}

.dz-eyedropper-loupe {
  --picked: transparent;
  position: absolute;
  display: grid;
  justify-items: center;
  gap: 6px;
  pointer-events: none;
}

.dz-eyedropper-loupe[hidden] {
  display: none;
}

.dz-eyedropper-loupe canvas {
  width: 116px;
  height: 116px;
  border: 3px solid var(--picked);
  border-radius: 50%;
  background: var(--dz-surface-strong);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5), var(--dz-shadow-pop);
  image-rendering: pixelated;
}

.dz-eyedropper-hex {
  padding: 3px 8px;
  border: 1px solid var(--glass-border-hover);
  border-radius: 999px;
  background: var(--dz-surface-strong);
  color: var(--text);
  font: 600 11px/1.2 var(--font-mono);
  box-shadow: var(--dz-shadow-pop);
}

/* A picker's sheet steps aside while the eyedropper picks (phones). */
.dz-sheet.is-stepping-aside,
.dz-backdrop.is-stepping-aside {
  visibility: hidden;
  pointer-events: none;
}

/* So do the panels that float over the canvas on phones and tablets: the whole canvas shows while it picks. */
.designer.is-eyedropping:not([data-layout="desktop"]) .dz-panel {
  visibility: hidden;
}

/* The paint picker's blend button sits before the close button (like an effect's). */
.dz-picker-head .dz-paint-blend.is-active {
  color: var(--accent);
}

/* As a bottom sheet (phones) the sheet's title names the paint, so the picker's own title steps back and the kinds,
   the blend button and close fit one row; on the narrowest phones they wrap instead of running off the side. */
.dz-sheet .dz-picker.is-paint > .dz-picker-head > .dz-picker-title {
  display: none;
}

.dz-sheet .dz-picker.is-paint > .dz-picker-head {
  flex-wrap: wrap;
  row-gap: 6px;
}

/* Selection colors (properties/selection-colors.js): rows like paint rows; "Show all" under them. */
.dz-selection-colors .dz-var-chip {
  margin-left: 0;
}

.dz-selection-colors-all {
  justify-self: start;
  margin-top: 4px;
}

.dz-selection-colors-all[hidden] {
  display: none;
}

/* The file's color profile (properties/color-profile.js): the two choices across the panel. */
.dz-color-profile .dz-seg {
  display: flex;
  width: 100%;
}

/* A color style's paints (ui/style-paints.js): a fill list in a picker. */
.dz-picker.is-style-paints .dz-picker-title {
  flex: 1;
}

.dz-style-paints-body {
  display: grid;
  gap: 8px;
  padding: 4px 12px 12px;
}

/* The page's background (properties/page.js): Color or Grid beside its label, the grid's settings under the color. */
.dz-page-bg-head > .dz-seg {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  flex: none;
  min-width: 120px;
}

.dz-page-grid {
  display: grid;
  gap: 6px;
  margin-top: 3px;
}

.dz-page-grid[hidden] {
  display: none;
}

/* ---------- Normal and Advanced (properties/simple.js, lib/design-mode.js) ---------- */
/* The switch at the top of the Design tab: two quiet choices across the panel. */
.dz-simple-switch {
  padding: 8px var(--dz-pad) 2px;
}

.dz-simple-switch .dz-seg {
  display: flex;
  width: 100%;
  height: 26px;
}

/* What Normal leaves out (the sections keep their own hidden state), and what is left empty by it. */
.designer .dz-tucked,
.designer .dz-tucked-empty,
.designer .dz-more-toggle.dz-simple-off {
  display: none !important;
}

/* A section's More row: like "More text options", with the names of what it holds after it. */
.dz-simple-more {
  min-width: 0;
}

.dz-simple-more-title {
  flex: none;
}

.dz-simple-more-names {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--text-3);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The tucked sections' More row: a quiet line between the sections, like a folded section's head. */
.dz-simple-sections {
  padding: 2px 8px 4px 4px;
  border-top: 1px solid var(--dz-line);
}

.dz-simple-sections .dz-simple-more {
  min-height: 32px;
  margin: 2px 0;
  padding-left: 4px;
}

.dz-simple-sections:first-child {
  border-top: 0;
}

/* Phones: a finger-sized switch and rows. */
.designer[data-layout="phone"] .dz-simple-switch .dz-seg {
  height: 48px;
}

.designer[data-layout="phone"] .dz-simple-sections .dz-simple-more {
  min-height: 44px;
}

/* Normal names Appearance's first two fields above them (properties/simple.js), over the same columns. */
.dz-simple-caption {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--dz-h-sm);
  gap: 6px;
  margin-bottom: -4px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
}

.dz-simple-caption > span {
  overflow: hidden;
  padding-left: 2px;
  text-overflow: ellipsis;
  white-space: nowrap;
}