/*
 * Plugin hero stage "uiMockup" (stages/uiMockup.php): the retro mockup kit. A plugin's real screen
 * as one ink window (the site's pixel language: ink borders, one hard offset shadow, bold pixel
 * type for the title and the primary action; the rest in the body face).
 *
 * Every page the same: one scale (--u = 1% of the stage's safe width, so type and borders match
 * on every page), the window on the stage's centre (the stage is centred on the copy block). A
 * plugin panel is 66u wide (a portrait panel); a screen with a preview pane is the full 100u, as
 * the plugins are.
 * Ink only, except where colour is the content; the plugin colour appears once, on the primary
 * action's shadow.
 */
.ui-mockup {
  --u: calc(min(100cqw - 2 * var(--pad), (100cqh - 1.2 * var(--pad)) * 1.2) / 100);
  --ww: calc(66 * var(--u));
  --ink: var(--color-text-primary);
  --paper: var(--color-bg);
  --soft: color-mix(in oklab, var(--ink) 8%, var(--paper));
  --rule: color-mix(in oklab, var(--ink) 22%, var(--paper));
  --quiet: color-mix(in oklab, var(--ink) 66%, var(--paper));
  --line: calc(0.45 * var(--u)) solid var(--ink);
  position: absolute; z-index: 1; inset: 0;
  font-family: var(--font-secondary);
}
.ui-mockup:not(.ui-mockup--single) { --ww: calc(100 * var(--u)); }

.ui-mockup__window {
  position: absolute; left: calc((100cqw - var(--ww)) / 2); top: 50%; translate: 0 -50%;
  box-sizing: border-box; width: var(--ww);
  background: var(--paper); color: var(--ink);
  border: calc(0.8 * var(--u)) solid var(--ink);
  box-shadow: calc(1.8 * var(--u)) calc(1.8 * var(--u)) 0 var(--ink);
  -webkit-user-select: none; user-select: none;
}
.ui-mockup__bar {
  display: flex; align-items: center; gap: calc(1.4 * var(--u));
  padding: calc(1.6 * var(--u)) calc(2.4 * var(--u));
  border-bottom: calc(0.8 * var(--u)) solid var(--ink);
}
.ui-mockup__mark { flex: none; display: block; width: calc(4.4 * var(--u)); height: calc(4.4 * var(--u)); border-radius: 22%; object-fit: cover; box-shadow: 0 0 0 calc(0.35 * var(--u)) var(--rule); }
.ui-mockup__bar span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; margin-left: calc(0.4 * var(--u)); font: 700 calc(2.7 * var(--u)) / 1.3 var(--font-primary); letter-spacing: 0.04em; white-space: nowrap; }
.ui-mockup__bar i { flex: none; width: calc(2.3 * var(--u)); height: calc(2.3 * var(--u)); border: calc(0.55 * var(--u)) solid var(--ink); }

.ui-mockup__tabs { display: flex; gap: calc(1 * var(--u)); padding: calc(2.4 * var(--u)) calc(2.4 * var(--u)) 0; }
.ui-mockup__tabs span {
  flex: 1 1 auto; text-align: center; padding: calc(1.2 * var(--u)) calc(1 * var(--u)); white-space: nowrap;
  font-size: calc(2.1 * var(--u)); line-height: 1.2; color: var(--quiet);
  border: var(--line); border-color: var(--rule);
}
.ui-mockup__tabs .is-active { color: var(--paper); background: var(--ink); border-color: var(--ink); font-weight: 700; }

/* One view at a time (uiMockup.js switches them): the preview beside the controls, or the controls
   alone. */
.ui-mockup__body { min-width: 0; padding: calc(2.4 * var(--u)); }
.ui-mockup__view { display: grid; grid-template-columns: 44fr 56fr; gap: calc(2.4 * var(--u)); }
.ui-mockup__view.is-single { grid-template-columns: minmax(0, 1fr); }
.ui-mockup__view[hidden] { display: none; }

/* ---------- Controls ---------- */
.ui-mockup__rows { display: flex; flex-direction: column; gap: calc(1.5 * var(--u)); min-width: 0; font-size: max(8.5px, calc(2.2 * var(--u))); line-height: 1.3; }
.ui-mockup__heading { display: flex; justify-content: space-between; gap: calc(1 * var(--u)); font-weight: 700; margin-top: calc(0.4 * var(--u)); }
.ui-mockup__heading:first-child { margin-top: 0; }
.ui-mockup__heading small { font-size: calc(1.8 * var(--u)); font-weight: 400; color: var(--quiet); }
.ui-mockup__field { display: flex; align-items: center; justify-content: space-between; gap: calc(2 * var(--u)); }
.ui-mockup__field > span:first-child { color: var(--quiet); white-space: nowrap; }
.ui-mockup__select, .ui-mockup__search, .ui-mockup__text-field, .ui-mockup__input {
  position: relative; box-sizing: border-box; min-width: 0;
  padding: calc(1.1 * var(--u)) calc(1.6 * var(--u)); border: var(--line);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ui-mockup__select { flex: 1 1 auto; padding-right: calc(5.4 * var(--u)); font-weight: 600; }
.ui-mockup__field > span:first-child + .ui-mockup__select { flex: 0 1 auto; }
.ui-mockup__select::after {
  content: ""; position: absolute; right: calc(1.8 * var(--u)); top: 32%;
  width: calc(1.2 * var(--u)); height: calc(1.2 * var(--u));
  border: solid var(--ink); border-width: 0 calc(0.45 * var(--u)) calc(0.45 * var(--u)) 0; rotate: 45deg;
}
/* Search: a square loupe, the quiet placeholder, the filter button (three bars) at the end. */
.ui-mockup__search { display: flex; align-items: center; gap: calc(1.2 * var(--u)); padding-left: calc(4.8 * var(--u)); color: var(--quiet); }
.ui-mockup__search > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ui-mockup__search::before {
  content: ""; position: absolute; left: calc(1.6 * var(--u)); top: 50%; translate: 0 -60%;
  width: calc(1.4 * var(--u)); height: calc(1.4 * var(--u)); border: calc(0.45 * var(--u)) solid var(--quiet);
}
.ui-mockup__search > i { flex: none; width: calc(2.2 * var(--u)); height: calc(1.6 * var(--u)); background: linear-gradient(var(--quiet) 0 0) top / 100% calc(0.4 * var(--u)) no-repeat, linear-gradient(var(--quiet) 0 0) center / 70% calc(0.4 * var(--u)) no-repeat, linear-gradient(var(--quiet) 0 0) bottom / 40% calc(0.4 * var(--u)) no-repeat; }
.ui-mockup__input { display: flex; flex-direction: column; gap: calc(0.3 * var(--u)); }
.ui-mockup__input small { font-size: calc(1.6 * var(--u)); color: var(--quiet); }
.ui-mockup__input span { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.ui-mockup__fields { display: flex; flex-direction: column; gap: calc(1 * var(--u)); }
.ui-mockup__segmented { display: flex; border: var(--line); }
.ui-mockup__segmented span { flex: 1 1 auto; text-align: center; padding: calc(1 * var(--u)) calc(1 * var(--u)); white-space: nowrap; }
.ui-mockup__segmented .is-active { background: var(--ink); color: var(--paper); font-weight: 600; }
.ui-mockup__stepper { display: flex; border: var(--line); }
.ui-mockup__stepper i, .ui-mockup__stepper b { padding: calc(0.6 * var(--u)) calc(1.4 * var(--u)); font-style: normal; }
.ui-mockup__stepper b { min-width: calc(3.6 * var(--u)); text-align: center; border-inline: var(--line); font-variant-numeric: tabular-nums; }
/* A colour sample as the plugin shows it: example text and value in the second colour, a quiet
   score chip, and Swap. */
.ui-mockup__color {
  position: relative; display: grid; justify-items: center; align-content: center; gap: calc(0.6 * var(--u));
  min-height: calc(22 * var(--u)); padding: calc(2 * var(--u));
  background: var(--swatch); color: var(--swatch-ink); border: var(--line);
  transition: background-color 0.25s ease, color 0.25s ease;
}
.ui-mockup__color.is-swapped { background: var(--swatch-ink); color: var(--swatch); }
.ui-mockup__color b { font-size: calc(4.2 * var(--u)); line-height: 1.1; }
.ui-mockup__color small { font-size: calc(2 * var(--u)); font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-mockup__color span, .ui-mockup__color i {
  position: absolute; bottom: calc(1.6 * var(--u)); padding: calc(0.5 * var(--u)) calc(1.2 * var(--u));
  border: calc(0.35 * var(--u)) solid currentColor; font-size: calc(1.6 * var(--u)); font-style: normal;
}
.ui-mockup__color span { left: calc(1.6 * var(--u)); }
.ui-mockup__color i { right: calc(1.6 * var(--u)); font-weight: 700; }
.ui-mockup__swatches { display: flex; gap: calc(1.2 * var(--u)); }
.ui-mockup__swatches i { width: calc(4.4 * var(--u)); aspect-ratio: 1; background: var(--swatch); border: var(--line); }
.ui-mockup__swatches i.is-active { outline: var(--line); outline-offset: calc(0.5 * var(--u)); }
.ui-mockup__swatches i.is-add { display: grid; place-items: center; background: none; border-color: var(--rule); color: var(--quiet); font-style: normal; }
/* Eight steps from one colour to the other. */
.ui-mockup__ramp { display: flex; border: var(--line); }
.ui-mockup__ramp i { flex: 1; height: calc(3.6 * var(--u)); }
.ui-mockup__ramp i:nth-child(1) { background: var(--from); flex-grow: 1.6; }
.ui-mockup__ramp i:nth-child(2) { background: color-mix(in oklab, var(--from) 86%, var(--to)); }
.ui-mockup__ramp i:nth-child(3) { background: color-mix(in oklab, var(--from) 72%, var(--to)); }
.ui-mockup__ramp i:nth-child(4) { background: color-mix(in oklab, var(--from) 58%, var(--to)); }
.ui-mockup__ramp i:nth-child(5) { background: color-mix(in oklab, var(--from) 42%, var(--to)); }
.ui-mockup__ramp i:nth-child(6) { background: color-mix(in oklab, var(--from) 28%, var(--to)); }
.ui-mockup__ramp i:nth-child(7) { background: color-mix(in oklab, var(--from) 14%, var(--to)); }
.ui-mockup__ramp i:nth-child(8) { background: var(--to); }
/* Cards in their own colours (notes, to-dos), stacked edge to edge as the plugins list them. */
.ui-mockup__cards { display: flex; flex-direction: column; border: var(--line); }
.ui-mockup__card {
  display: flex; flex-direction: column; gap: calc(0.2 * var(--u)); padding: calc(1.2 * var(--u)) calc(1.6 * var(--u));
  background: var(--swatch); color: oklch(22% 0.03 280);
  transition: padding 0.2s ease;
}
.ui-mockup__card + .ui-mockup__card { border-top: calc(0.35 * var(--u)) solid var(--ink); }
.ui-mockup__card b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-mockup__card small { font-size: calc(1.7 * var(--u)); opacity: 0.72; }
.ui-mockup__card.is-active { padding-block: calc(2 * var(--u)); box-shadow: inset calc(1 * var(--u)) 0 0 var(--ink); }
/* Image tiles: the kit's pixel picture in a soft square. */
.ui-mockup__thumbs { display: flex; gap: calc(1.2 * var(--u)); }
.ui-mockup__thumbs i {
  width: calc(9 * var(--u)); aspect-ratio: 1; border: var(--line);
  background: linear-gradient(var(--ink) 0 0) 50% 72% / 60% 18% no-repeat, radial-gradient(circle, var(--ink) 0 34%, transparent 36%) 72% 26% / 30% 30% no-repeat, var(--soft);
}
.ui-mockup__note { font-size: calc(1.7 * var(--u)); color: var(--quiet); }
/* On a cover the notes stand apart with room for two lines of text (no caption, no active rule),
   and the image tiles step back to low contrast so the typing reads first. */
.ui-mockup--cover .ui-mockup__cards { gap: calc(1.2 * var(--u)); border: 0; }
.ui-mockup--cover .ui-mockup__card,
.ui-mockup--cover .ui-mockup__card.is-active {
  padding: calc(1.4 * var(--u)) calc(1.8 * var(--u)); border: 0;
  box-shadow: calc(0.6 * var(--u)) calc(0.6 * var(--u)) 0 oklch(0% 0 0 / 0.35);
}
.ui-mockup--cover .ui-mockup__card b {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  white-space: normal; font-size: calc(2.2 * var(--u)); line-height: 1.25;
}
.ui-mockup--cover .ui-mockup__card small { display: none; }
/* Colour Extractly's inspiration wall: shorter gradient tiles so the palettes show below them. */
.ui-mockup--cover .ui-mockup__gradient > b { height: calc(7 * var(--u)); }
.ui-mockup--cover .ui-mockup__palettes .ui-mockup__strip { height: calc(4.6 * var(--u)); }
.ui-mockup--cover .ui-mockup__thumbs i {
  --thumb-ink: color-mix(in oklab, var(--ink) 32%, var(--soft));
  border-color: var(--rule);
  background: linear-gradient(var(--thumb-ink) 0 0) 50% 72% / 60% 18% no-repeat, radial-gradient(circle, var(--thumb-ink) 0 34%, transparent 36%) 72% 26% / 30% 30% no-repeat, var(--soft);
}
/* Toggles: square pixel switches; on = filled with the knob right, off = outlined with it left. */
.ui-mockup__toggle { display: flex; align-items: center; justify-content: space-between; gap: calc(1 * var(--u)); white-space: nowrap; }
.ui-mockup__toggle i { position: relative; flex: none; box-sizing: border-box; width: calc(6 * var(--u)); height: calc(3.3 * var(--u)); border: calc(0.45 * var(--u)) solid var(--ink); }
.ui-mockup__toggle i::after { content: ""; position: absolute; left: 10%; top: 50%; translate: 0 -50%; width: 38%; aspect-ratio: 1; background: var(--ink); transition: left 0.15s ease, right 0.15s ease; }
.ui-mockup__toggle.is-on i { background: var(--ink); }
.ui-mockup__toggle.is-on i::after { left: 52%; background: var(--paper); }
.ui-mockup__buttons { display: flex; gap: calc(1.2 * var(--u)); }
.ui-mockup__buttons span { flex: 1 1 auto; text-align: center; padding: calc(1.2 * var(--u)) calc(1.4 * var(--u)); border: var(--line); white-space: nowrap; }
.ui-mockup__rows > .ui-mockup__buttons { margin-top: auto; }
/* The one primary action; its shadow is the only place the plugin colour appears. */
.ui-mockup__buttons .is-primary {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
  box-shadow: calc(0.9 * var(--u)) calc(0.9 * var(--u)) 0 color-mix(in oklab, var(--plugin-hero-a) 75%, var(--ink));
  font: 700 calc(2 * var(--u)) / 1.2 var(--font-primary); letter-spacing: 0.03em; text-transform: uppercase;
}
/* The plugin's bottom bar: quiet meta on the left, its buttons on the right. */
.ui-mockup__footer {
  display: flex; align-items: center; justify-content: flex-end; gap: calc(1.6 * var(--u));
  padding: calc(1.6 * var(--u)) calc(2.4 * var(--u)); border-top: calc(0.45 * var(--u)) solid var(--rule);
  font-size: calc(2 * var(--u)); line-height: 1.3;
}
.ui-mockup__footer small { margin-right: auto; font-size: calc(1.7 * var(--u)); color: var(--quiet); white-space: nowrap; }
.ui-mockup__footer .ui-mockup__buttons span:not(.is-primary) { flex: none; border-color: var(--rule); }
.ui-mockup__footer .ui-mockup__buttons .is-primary { flex: none; min-width: calc(14 * var(--u)); }
/* A narrow panel (the portrait one beside the copy) wraps its bar instead of spilling out of the
   window; every button keeps its width and the group stays right-aligned. */
.ui-mockup__footer { flex-wrap: wrap; row-gap: calc(1.2 * var(--u)); }
.ui-mockup__footer .ui-mockup__buttons { flex-wrap: wrap; justify-content: flex-end; gap: calc(1.2 * var(--u)); min-width: 0; }

/* ---------- Previews (uiMockupPreview.php) ---------- */
.ui-mockup__preview {
  position: relative; box-sizing: border-box; min-width: 0; aspect-ratio: 1 / 1.08; align-self: start;
  border: var(--line); background: var(--paper); overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; padding: calc(2.4 * var(--u));
}
.ui-mockup__preview--picture { align-items: center; background: repeating-conic-gradient(var(--soft) 0 25%, var(--paper) 0 50%) 0 0 / calc(4 * var(--u)) calc(4 * var(--u)); }
.ui-mockup__picture { display: block; width: 66%; height: auto; color: var(--ink); }
.ui-mockup__check { position: absolute; left: calc(1.4 * var(--u)); top: calc(1.4 * var(--u)); width: calc(4.2 * var(--u)); height: calc(4.2 * var(--u)); background: var(--ink); }
.ui-mockup__check::after {
  content: ""; position: absolute; left: 32%; top: 16%; width: 28%; height: 48%;
  border: solid var(--paper); border-width: 0 calc(0.65 * var(--u)) calc(0.65 * var(--u)) 0; rotate: 45deg;
}
/* A real code: always on white, with its quiet zone, so a camera reads it in either theme. */
.ui-mockup__preview--qr { padding: calc(3 * var(--u)); background: var(--soft); }
.ui-mockup__plate { display: block; padding: 7%; background: #fff; border: var(--line); }
.ui-mockup__plate img { display: block; width: 100%; height: auto; }
/* Masonry: sample layers in columns with even gaps; each falls into place in turn. */
.ui-mockup__masonry { position: relative; flex: 1; --gap: 4; }
.ui-mockup__masonry i {
  position: absolute; box-sizing: border-box;
  width: calc((100% - (var(--cols) - 1) * var(--gap) * 1%) / var(--cols));
  left: calc(var(--c) * ((100% - (var(--cols) - 1) * var(--gap) * 1%) / var(--cols) + var(--gap) * 1%));
  top: calc(var(--y) / var(--gh) * 100%); height: calc(var(--h) / var(--gh) * 100%);
  border: var(--line); background: var(--paper);
  transition: left 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), top 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), height 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ui-mockup__masonry i:nth-child(3n + 1) { background: var(--soft); }
.ui-mockup__masonry i:nth-child(5) { background: var(--ink); }

/* ---------- Interaction (uiMockup.js adds .is-live) ---------- */
.ui-mockup.is-live :is(.ui-mockup__tabs span, .ui-mockup__segmented span, .ui-mockup__toggle, .ui-mockup__card, .ui-mockup__swatches i, .ui-mockup__stepper i, .ui-mockup__text-field, .ui-mockup__color i, .ui-mockup__buttons span, .ui-mockup__rail-button[data-view], .ui-mockup__underline span, .ui-mockup__chips span, .ui-mockup__action) { cursor: pointer; }
.ui-mockup.is-live .ui-mockup__text-field:hover { background: var(--soft); }
.ui-mockup.is-live .ui-mockup__card:not(.is-active):hover { filter: brightness(1.06); }
.ui-mockup :is(.ui-mockup__buttons span, .ui-mockup__action, .ui-mockup__icon-button, .ui-mockup__stepper i).is-pressed { translate: calc(0.6 * var(--u)) calc(0.6 * var(--u)); box-shadow: none; }
.ui-mockup :is(.is-primary, .ui-mockup__action).is-done::before { content: "✓ " / ""; }
.ui-mockup__text-field.is-cycled { animation: ui-mockup-type 0.35s steps(6, end); }
@keyframes ui-mockup-type { from { clip-path: inset(0 100% 0 0); } }
@media (prefers-reduced-motion: reduce) {
  .ui-mockup *, .ui-mockup *::after { transition: none !important; animation: none !important; }
}

/* Phones: the window is small, so its quiet meta lines (captions, versions, notes) step aside and
   the rest keeps a readable floor (.ui-mockup__rows). */
@media (max-width: 700px) {
  .ui-mockup:not(.ui-mockup--cover) :is(.ui-mockup__card small, .ui-mockup__footer small, .ui-mockup__note) { display: none; }
}

/* One column (tablets, phones): a shorter stage, so the window sits close to the copy beneath it
   instead of on a tall empty band. Every mockup window fits 1 / 0.74. */
@media (max-width: 960px) {
  .plugin-hero__stage:has(> .ui-mockup) { aspect-ratio: 1 / 0.74; }
}

/* ---------- Cartridge cover (components/cardRidge): the tool fills the cover ---------- */
/* The plugin's essence ('cover' in the data) is the whole cover: one window over the cover's full
   area with an even margin (--cover-x is the cover's left edge on the stage, set by cardRidge.css),
   the category and plugin marks in its title bar, a preview stacked above its rows. A tall screen
   lets its body fade out at the foot, like a scrolled panel; the mascot stands in front of it.
   The window is the cartridge parallax's layer (data-parallax-z 2, under the mascot's 4): on hover
   it pops out of the cover in 3D, so nothing clips it. */
.ui-mockup--cover, .ui-mockup--cover:not(.ui-mockup--single) {
  --m: calc(0.45 * var(--pad));
  --ww: calc(100cqw - var(--cover-x, 0px) - 2 * var(--m));
  --u: calc(var(--ww) / 58);
}
.ui-mockup--cover .ui-mockup__window {
  left: calc(var(--cover-x, 0px) + var(--m)); top: var(--m); translate: none;
  height: calc(100cqh - 2 * var(--m)); max-height: none;
  box-shadow: calc(1.2 * var(--u)) calc(1.2 * var(--u)) 0 oklch(12% 0 0 / 0.55);
}
.ui-mockup--cover .ui-mockup__window > .ui-mockup__body { flex: 1; }
.ui-mockup--cover .ui-mockup__bar span { font-size: calc(2.3 * var(--u)); }
.ui-mockup--cover .ui-mockup__view { grid-template-columns: minmax(0, 1fr); }
.ui-mockup--cover .ui-mockup__preview { align-self: stretch; aspect-ratio: 16 / 9; }
/* A preview with only the main action under it takes the whole window (Masonry). */
.ui-mockup--cover .ui-mockup__preview:has(+ .ui-mockup__rows > :only-child) { flex: 1; aspect-ratio: auto; }
.ui-mockup--cover .ui-mockup__preview:has(+ .ui-mockup__rows > :only-child) + .ui-mockup__rows { flex: none; }
/* On a cover the code (assets/productArtworks/qrly/wifi-qr.svg) is light on no background: no
   white plate, no backdrop, as large as the preview is tall; the dark window is its quiet zone. */
.ui-mockup--cover .ui-mockup__plate { width: auto; height: 100%; aspect-ratio: 1; margin-inline: auto; padding: 0; background: none; border: 0; }
.ui-mockup--cover .ui-mockup__plate img { height: 100%; }
.ui-mockup--cover .ui-mockup__preview--qr { aspect-ratio: 16 / 11; padding: calc(1.2 * var(--u)); background: none; }
/* No fade at the foot of a cover: its main action sits there and stays a solid button; the
   body clips anything taller. */
.ui-mockup--cover .ui-mockup__body, .ui-mockup--cover.ui-mockup--shell .ui-mockup__body { -webkit-mask-image: none; mask-image: none; }
/* On the plugin's colour mesh (cardRidge.php) the miniature is the dark plugin window, in both themes. */
.ui-mockup--cover { --ink: oklch(95% 0 0); --paper: oklch(19% 0.01 280); }

/* ---------- The shared shell (the frame most plugins share) ---------- */
/* A tall screen keeps its bars: the window never outgrows the stage; its body crops and fades at
   the foot like a scrolled plugin panel. */
.ui-mockup__window { display: flex; flex-direction: column; max-height: calc(100cqh - 1.2 * var(--pad)); }
.ui-mockup__window > :is(.ui-mockup__body, .ui-mockup__shell) { flex: 0 1 auto; min-height: 0; overflow: hidden; }
.ui-mockup--shell .ui-mockup__body { flex: 1; -webkit-mask-image: linear-gradient(#000 86%, transparent); mask-image: linear-gradient(#000 86%, transparent); }
.ui-mockup__glyph { display: block; flex: none; width: calc(2.4 * var(--u)); height: calc(2.4 * var(--u)); }
/* The icon rail: views at the top, still buttons at its foot. */
.ui-mockup__shell { display: flex; }
.ui-mockup__rail {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: calc(1 * var(--u));
  width: calc(9 * var(--u)); padding: calc(2 * var(--u)) 0; border-right: calc(0.45 * var(--u)) solid var(--rule);
}
.ui-mockup__rail-foot { display: flex; flex-direction: column; align-items: center; gap: calc(1 * var(--u)); margin-top: auto; padding-top: calc(2 * var(--u)); }
.ui-mockup__rail-button { display: grid; place-items: center; width: calc(6.4 * var(--u)); aspect-ratio: 1; color: var(--quiet); }
.ui-mockup__rail-button .ui-mockup__glyph { width: calc(2.8 * var(--u)); height: calc(2.8 * var(--u)); }
.ui-mockup__rail-button.is-active { color: var(--ink); background: var(--soft); outline: calc(0.45 * var(--u)) solid var(--ink); }
.ui-mockup__avatar { width: calc(3.6 * var(--u)); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 36%, var(--ink) 0 22%, transparent 24%), radial-gradient(circle at 50% 108%, var(--ink) 0 46%, var(--soft) 48%); outline: calc(0.35 * var(--u)) solid var(--rule); }
/* Toolbars: dropdowns and square icon buttons. */
.ui-mockup__toolbar { display: flex; gap: calc(1 * var(--u)); min-width: 0; }
.ui-mockup__dropdown { display: flex; align-items: center; gap: calc(1 * var(--u)); flex: 1 1 auto; min-width: 0; padding: calc(1 * var(--u)) calc(1.4 * var(--u)); border: var(--line); white-space: nowrap; }
.ui-mockup__dropdown > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ui-mockup__dropdown > .ui-mockup__glyph:last-child { width: calc(1.8 * var(--u)); height: calc(1.8 * var(--u)); color: var(--quiet); }
.ui-mockup__icon-button { flex: none; display: grid; place-items: center; width: calc(5 * var(--u)); aspect-ratio: 1; box-sizing: border-box; border: var(--line); border-color: var(--rule); }
/* Groups of layers: a header (type, name, an action chip, a count, the menu), the group toolbar,
   then rows behind drag handles. */
.ui-mockup__group, .ui-mockup__templates { display: flex; flex-direction: column; gap: calc(1.2 * var(--u)); padding: calc(1.4 * var(--u)); border: var(--line); border-color: var(--rule); }
.ui-mockup__group-head { display: flex; align-items: center; gap: calc(1.2 * var(--u)); min-width: 0; }
.ui-mockup__group-head b { flex: 1; min-width: 0; font-size: calc(1.9 * var(--u)); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-mockup__chip { display: inline-flex; align-items: center; gap: calc(0.8 * var(--u)); padding: calc(0.6 * var(--u)) calc(1.2 * var(--u)); border: var(--line); border-color: var(--rule); font-size: calc(1.8 * var(--u)); white-space: nowrap; }
.ui-mockup__count { padding: 0 calc(1 * var(--u)); background: var(--soft); font-size: calc(1.8 * var(--u)); font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-mockup__layers { display: flex; flex-direction: column; gap: calc(1 * var(--u)); }
.ui-mockup__layer { display: flex; align-items: center; gap: calc(1 * var(--u)); min-width: 0; }
.ui-mockup__layer > .ui-mockup__text-field { flex: 1; }
.ui-mockup__handle { flex: none; display: grid; color: var(--quiet); font-style: normal; }
.ui-mockup__tile { display: block; width: calc(16 * var(--u)); height: calc(9 * var(--u)); background: var(--soft); border: var(--line); border-color: var(--rule); }
.ui-mockup__template { display: flex; align-items: center; gap: calc(1.2 * var(--u)); padding: calc(0.8 * var(--u)); border: var(--line); border-color: var(--rule); min-width: 0; }
.ui-mockup__template > i { flex: none; display: grid; place-items: center; width: calc(4.6 * var(--u)); aspect-ratio: 1; background: var(--soft); font-style: normal; }
.ui-mockup__template b { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-mockup__template .ui-mockup__icon-button { width: calc(4 * var(--u)); }
/* Text tabs with an underline, and filter chips. */
.ui-mockup__underline { display: flex; gap: calc(3 * var(--u)); border-bottom: calc(0.35 * var(--u)) solid var(--rule); }
.ui-mockup__underline span { padding-bottom: calc(1 * var(--u)); color: var(--quiet); white-space: nowrap; }
.ui-mockup__underline .is-active { color: var(--ink); font-weight: 700; box-shadow: 0 calc(0.6 * var(--u)) 0 var(--ink); }
.ui-mockup__chips { display: flex; flex-wrap: wrap; gap: calc(1 * var(--u)); }
.ui-mockup__chips span { padding: calc(0.7 * var(--u)) calc(1.6 * var(--u)); border: var(--line); border-color: var(--rule); white-space: nowrap; }
.ui-mockup__chips .is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); font-weight: 700; }
.ui-mockup__segmented em { margin-left: calc(0.8 * var(--u)); padding: 0 calc(0.6 * var(--u)); background: var(--ink); color: var(--paper); font: 700 calc(1.4 * var(--u)) / 1.5 var(--font-primary); font-style: normal; letter-spacing: 0.04em; }
.ui-mockup__segmented .is-active em { background: var(--paper); color: var(--ink); }
/* An assistant's empty state and its message box. */
.ui-mockup__prompt { display: flex; flex-direction: column; align-items: center; gap: calc(1.4 * var(--u)); padding: calc(3 * var(--u)) 0; text-align: center; }
.ui-mockup__prompt > i { font-style: normal; }
.ui-mockup__prompt > i .ui-mockup__glyph { width: calc(7 * var(--u)); height: calc(7 * var(--u)); }
.ui-mockup__prompt > b { font-size: calc(2.8 * var(--u)); }
.ui-mockup__prompt .ui-mockup__chips { justify-content: center; }
.ui-mockup__composer { display: flex; flex-direction: column; justify-content: space-between; gap: calc(2 * var(--u)); min-height: calc(13 * var(--u)); padding: calc(1.4 * var(--u)); border: var(--line); }
.ui-mockup__composer > span:first-child { color: var(--quiet); }
.ui-mockup__composer-bar { display: flex; align-items: center; gap: calc(1 * var(--u)); }
.ui-mockup__composer-bar .is-send { margin-left: auto; background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: calc(0.7 * var(--u)) calc(0.7 * var(--u)) 0 color-mix(in oklab, var(--plugin-hero-a) 75%, var(--ink)); }
/* A score ring with its verdict. */
.ui-mockup__score { display: flex; align-items: center; gap: calc(1.8 * var(--u)); padding: calc(1.6 * var(--u)); background: var(--soft); }
.ui-mockup__score > i { flex: none; display: grid; place-items: center; width: calc(8 * var(--u)); aspect-ratio: 1; border-radius: 50%; font-style: normal; background: radial-gradient(circle, var(--soft) 0 58%, transparent 60%), conic-gradient(var(--ink) calc(var(--score) * 1%), var(--rule) 0); }
.ui-mockup__score > i b { font-size: calc(2 * var(--u)); }
.ui-mockup__score > span { display: flex; flex-direction: column; gap: calc(0.6 * var(--u)); min-width: 0; }
.ui-mockup__score small { color: var(--quiet); font-size: calc(1.8 * var(--u)); }
/* The column's one primary action, at its foot. */
.ui-mockup__action {
  display: flex; align-items: center; justify-content: center; gap: calc(1 * var(--u)); margin-top: auto;
  padding: calc(1.5 * var(--u)); background: var(--ink); color: var(--paper); white-space: nowrap;
  box-shadow: calc(0.9 * var(--u)) calc(0.9 * var(--u)) 0 color-mix(in oklab, var(--plugin-hero-a) 75%, var(--ink));
  font: 700 calc(2 * var(--u)) / 1.2 var(--font-primary); letter-spacing: 0.03em; text-transform: uppercase;
}
/* A number field: drag handle, value, unit, and a line that shows how far it is set. */
.ui-mockup__slider { position: relative; display: flex; align-items: center; gap: calc(1.4 * var(--u)); padding: calc(1.1 * var(--u)) calc(1.4 * var(--u)); background: var(--soft); }
.ui-mockup__slider::after { content: ""; position: absolute; left: 0; bottom: 0; width: var(--fill); height: calc(0.5 * var(--u)); background: var(--ink); }
.ui-mockup__slider small { margin-left: auto; color: var(--quiet); }
.ui-mockup__frame-row { display: flex; align-items: center; gap: calc(1.2 * var(--u)); padding: calc(1 * var(--u)); background: var(--soft); min-width: 0; }
.ui-mockup__frame-row > span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ui-mockup__frame-row :is(b, small) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-mockup__frame-row small { color: var(--quiet); font-size: calc(1.6 * var(--u)); }
.ui-mockup__frame-thumb { flex: none; width: calc(4.4 * var(--u)); aspect-ratio: 1; background: linear-gradient(var(--ink) 0 0) 50% 78% / 56% 22% no-repeat, radial-gradient(circle, var(--ink) 0 30%, transparent 32%) 50% 30% / 60% 60% no-repeat, var(--paper); border: var(--line); }
.ui-mockup__curve { display: block; padding: calc(1 * var(--u)); background: var(--soft); }
.ui-mockup__curve svg { display: block; width: 100%; height: calc(12 * var(--u)); overflow: visible; }
.ui-mockup__curve path { fill: none; stroke: var(--ink); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.ui-mockup__curve path.is-guide { stroke: var(--quiet); stroke-dasharray: 3 3; }
.ui-mockup__curve rect { fill: var(--ink); }
/* The shared bottom bar: licence pill, feedback link, version. */
.ui-mockup__status { display: flex; align-items: center; gap: calc(1.6 * var(--u)); padding: calc(1.2 * var(--u)) calc(2 * var(--u)); border-top: calc(0.45 * var(--u)) solid var(--rule); font-size: calc(1.7 * var(--u)); }
.ui-mockup__pill { padding: calc(0.5 * var(--u)) calc(1.4 * var(--u)); background: var(--soft); font-weight: 700; white-space: nowrap; }
.ui-mockup__status u { color: var(--quiet); text-underline-offset: 0.2em; }
.ui-mockup__status small { margin-left: auto; color: var(--quiet); font-size: inherit; font-variant-numeric: tabular-nums; }
/* Preview extras: a canvas tag and zoom (the animation editor), a playback bar, image layers. */
.ui-mockup__canvas-tag { position: absolute; left: calc(1.4 * var(--u)); top: calc(1.4 * var(--u)); display: flex; align-items: center; gap: calc(0.6 * var(--u)); font: 700 calc(1.5 * var(--u)) / 1 var(--font-primary); letter-spacing: 0.06em; }
.ui-mockup__canvas-tag i { width: calc(1 * var(--u)); aspect-ratio: 1; background: var(--ink); }
.ui-mockup__zoom { position: absolute; right: calc(1.4 * var(--u)); top: calc(1.2 * var(--u)); font-size: calc(1.6 * var(--u)); font-weight: 700; word-spacing: calc(0.6 * var(--u)); }
.ui-mockup__player { position: absolute; left: 50%; bottom: calc(1.4 * var(--u)); translate: -50% 0; display: flex; align-items: center; gap: calc(1.6 * var(--u)); padding: calc(0.6 * var(--u)) calc(1.6 * var(--u)); background: var(--paper); border: var(--line); font-size: calc(1.7 * var(--u)); font-weight: 700; white-space: nowrap; }
.ui-mockup__player b { font-size: calc(1.4 * var(--u)); }
.ui-mockup__preview--images { justify-content: flex-start; background: var(--paper); }
.ui-mockup__images { display: grid; grid-template-columns: 1fr 1fr; gap: calc(1.6 * var(--u)); }
.ui-mockup__images i {
  aspect-ratio: 4 / 3; border: var(--line);
  background: linear-gradient(var(--ink) 0 0) 50% 100% / 58% 30% no-repeat, radial-gradient(circle, var(--ink) 0 32%, transparent 34%) 50% 34% / 46% 62% no-repeat, var(--soft);
}
/* Colour content: gradient cards over a strip of their stops, palettes as strips, menu rows. */
.ui-mockup__gradients, .ui-mockup__palettes { display: grid; grid-template-columns: 1fr 1fr; gap: calc(1.4 * var(--u)); }
.ui-mockup__gradient { display: flex; flex-direction: column; border: var(--line); overflow: hidden; }
.ui-mockup__gradient > b { display: block; height: calc(11 * var(--u)); }
.ui-mockup__strip { display: flex; height: calc(3.2 * var(--u)); }
.ui-mockup__palettes .ui-mockup__strip { height: calc(6 * var(--u)); border: var(--line); }
.ui-mockup__strip i { flex: 1; }
.ui-mockup__menu { display: flex; flex-direction: column; gap: calc(1 * var(--u)); }
.ui-mockup__menu-item { display: flex; align-items: center; gap: calc(1.6 * var(--u)); padding: calc(1.3 * var(--u)) calc(1.6 * var(--u)); border: var(--line); border-color: var(--rule); min-width: 0; }
.ui-mockup__menu-item b { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.02em; }
.ui-mockup.is-live .ui-mockup__menu-item:hover { background: var(--soft); }
/* Bottom bars follow their view. */
.ui-mockup__bars[hidden] { display: none; }
/* Mode cards: a sketch of what the mode writes (a table of contents, a component grid), its name. */
.ui-mockup__modes { display: grid; grid-template-columns: 1fr 1fr; gap: calc(1.4 * var(--u)); }
.ui-mockup__mode { display: flex; flex-direction: column; gap: calc(1 * var(--u)); padding: calc(1 * var(--u)); border: var(--line); border-color: var(--rule); color: var(--quiet); }
.ui-mockup__mode > i { height: calc(10 * var(--u)); background-color: var(--soft); }
.ui-mockup__mode > i.is-sketch-0 { background-image: repeating-linear-gradient(var(--rule) 0 calc(0.5 * var(--u)), transparent calc(0.5 * var(--u)) calc(1.8 * var(--u))); background-size: 62% 70%; background-position: 20% 50%; background-repeat: no-repeat; }
.ui-mockup__mode > i.is-sketch-1 { background-image: linear-gradient(90deg, var(--rule) 0 calc(0.5 * var(--u)), transparent 0), linear-gradient(var(--rule) 0 calc(0.5 * var(--u)), transparent 0); background-size: calc(4 * var(--u)) calc(3 * var(--u)); background-position: center; }
.ui-mockup__mode b { font-size: calc(2 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-mockup__mode.is-active { color: var(--ink); border-color: var(--ink); box-shadow: calc(0.7 * var(--u)) calc(0.7 * var(--u)) 0 color-mix(in oklab, var(--plugin-hero-a) 75%, var(--ink)); }
.ui-mockup__mode.is-active > i { background-color: color-mix(in oklab, var(--plugin-hero-a) 22%, var(--paper)); }
/* A virtual index: rows indented by depth along a guide line, each with its type tag. */
.ui-mockup__tree { display: flex; flex-direction: column; gap: calc(0.9 * var(--u)); }
.ui-mockup__node {
  display: flex; align-items: center; gap: calc(1 * var(--u)); min-width: 0;
  margin-left: calc(var(--depth) * 4 * var(--u)); padding: calc(0.9 * var(--u)) calc(1.2 * var(--u));
  background: var(--soft); box-shadow: calc(-1.6 * var(--u)) 0 0 calc(-1.2 * var(--u)) var(--rule);
}
.ui-mockup__node em { flex: none; padding: 0 calc(1 * var(--u)); border: calc(0.3 * var(--u)) solid var(--rule); font-style: normal; font-size: calc(1.6 * var(--u)); color: var(--quiet); }
.ui-mockup__node:first-child em { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ui-mockup__node b { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-mockup__node > .ui-mockup__glyph { color: var(--quiet); }
/* Icon buttons in a bar, letter keys, chips with colour dots. */
.ui-mockup__buttons .is-icon { flex: none; display: grid; place-items: center; padding-inline: calc(1.2 * var(--u)); border-color: var(--rule); }
.ui-mockup__icon-button.is-key { font-weight: 700; font-size: calc(2 * var(--u)); }
.ui-mockup__chips span { display: inline-flex; align-items: center; gap: calc(0.8 * var(--u)); }
.ui-mockup__chips span > i { width: calc(1.8 * var(--u)); aspect-ratio: 1; border-radius: 50%; background: var(--swatch); }
/* A note body. */
.ui-mockup__textarea { display: flex; flex-direction: column; justify-content: space-between; min-height: calc(14 * var(--u)); padding: calc(1.4 * var(--u)); border: var(--line); border-color: var(--rule); color: var(--quiet); }
.ui-mockup__textarea > .ui-mockup__glyph { align-self: flex-end; width: calc(3.4 * var(--u)); height: calc(3.4 * var(--u)); color: var(--ink); }
/* Option tiles: an icon over its label (and a quiet line); the chosen one inked. */
.ui-mockup__tile-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(9 * var(--u)), 1fr)); gap: calc(1 * var(--u)); }
.ui-mockup__tile-option { display: flex; flex-direction: column; align-items: center; gap: calc(0.6 * var(--u)); padding: calc(1.2 * var(--u)) calc(0.6 * var(--u)); border: var(--line); border-color: var(--rule); color: var(--quiet); text-align: center; min-width: 0; }
.ui-mockup__tile-option b { font-size: calc(1.8 * var(--u)); font-weight: 600; white-space: nowrap; }
.ui-mockup__tile-option small { font-size: calc(1.5 * var(--u)); }
.ui-mockup__tile-option.is-active { color: var(--ink); border-color: var(--ink); background: var(--soft); }
/* Bookmark cards; the open one shows its notes, tinted in their colours. */
.ui-mockup__bookmarks { display: flex; flex-direction: column; gap: calc(1 * var(--u)); }
.ui-mockup__bookmark { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: calc(1.6 * var(--u)); align-items: center; padding: calc(1.2 * var(--u)) calc(1.6 * var(--u)); border: var(--line); border-color: var(--rule); }
.ui-mockup__bookmark > .ui-mockup__glyph { grid-row: 1 / span 2; width: calc(3 * var(--u)); height: calc(3 * var(--u)); }
.ui-mockup__bookmark > :is(b, small) { grid-column: 2; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-mockup__bookmark > small { color: var(--quiet); font-size: calc(1.7 * var(--u)); }
.ui-mockup__bookmark.is-active { border-color: var(--ink); box-shadow: calc(0.7 * var(--u)) calc(0.7 * var(--u)) 0 color-mix(in oklab, var(--plugin-hero-a) 75%, var(--ink)); }
.ui-mockup__notes { grid-column: 1 / -1; display: none; flex-direction: column; gap: calc(0.8 * var(--u)); margin-top: calc(1.2 * var(--u)); }
.ui-mockup__bookmark.is-active .ui-mockup__notes { display: flex; }
.ui-mockup__notes > span { padding: calc(1 * var(--u)) calc(1.4 * var(--u)); background: color-mix(in oklab, var(--swatch) 26%, var(--paper)); color: color-mix(in oklab, var(--swatch) 70%, var(--ink)); }
.ui-mockup__notes em { padding: calc(1 * var(--u)) calc(1.4 * var(--u)); background: var(--soft); color: var(--quiet); }
/* To-do groups with their tallies; the open one lists checkboxes and their file links. */
.ui-mockup__todos { display: flex; flex-direction: column; gap: calc(1 * var(--u)); }
.ui-mockup__todo-group { display: flex; flex-direction: column; gap: calc(0.8 * var(--u)); padding: calc(1.2 * var(--u)) calc(1.6 * var(--u)); background: var(--soft); }
.ui-mockup__todo-group .ui-mockup__count { background: var(--paper); }
.ui-mockup__todo-group:not(.is-open) .ui-mockup__todo { display: none; }
.ui-mockup__todo { display: flex; align-items: flex-start; gap: calc(1.4 * var(--u)); }
.ui-mockup__todo > i { flex: none; width: calc(3 * var(--u)); aspect-ratio: 1; margin-top: calc(0.3 * var(--u)); border: var(--line); border-color: var(--quiet); }
.ui-mockup__todo.is-done > i { background: var(--ink); border-color: var(--ink); box-shadow: inset 0 0 0 calc(0.6 * var(--u)) var(--paper); }
.ui-mockup__todo.is-done > span { text-decoration: line-through; color: var(--quiet); }
.ui-mockup__todo > span { display: flex; flex-direction: column; min-width: 0; }
.ui-mockup__todo u { font-size: calc(1.7 * var(--u)); color: var(--quiet); }
.ui-mockup.is-live :is(.ui-mockup__tile-option, .ui-mockup__bookmark, .ui-mockup__todo, .ui-mockup__todo-group .ui-mockup__group-head, .ui-mockup__mode, [data-view]) { cursor: pointer; }
/* A colour token list under its snapshot bar; the picked token is outlined. */
.ui-mockup__colorlist { display: flex; flex-direction: column; gap: calc(0.6 * var(--u)); }
.ui-mockup__snapshot { display: flex; align-items: center; gap: calc(1.4 * var(--u)); padding: calc(1.1 * var(--u)) calc(1.6 * var(--u)); background: var(--ink); color: var(--paper); }
.ui-mockup__snapshot b { flex: 1; }
.ui-mockup__token { display: grid; grid-template-columns: auto minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; gap: calc(1.4 * var(--u)); padding: calc(0.9 * var(--u)) calc(1.2 * var(--u)); border: var(--line); border-color: transparent; }
.ui-mockup__token > i { width: calc(3.4 * var(--u)); aspect-ratio: 1; background: var(--swatch); border: calc(0.3 * var(--u)) solid var(--rule); }
.ui-mockup__token > :is(b, small) { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-mockup__token > b { font-family: ui-monospace, monospace; font-size: calc(1.9 * var(--u)); }
.ui-mockup__token > small { color: var(--quiet); font-family: ui-monospace, monospace; font-size: calc(1.7 * var(--u)); }
.ui-mockup__token.is-active { border-color: var(--ink); background: var(--soft); }
.ui-mockup__token:not(.is-active) > b { color: var(--quiet); }
.ui-mockup__add { padding: calc(1 * var(--u)); text-align: center; border: var(--line); border-color: var(--rule); font-weight: 600; }
.ui-mockup.is-live .ui-mockup__token { cursor: pointer; }
.ui-mockup.is-live .ui-mockup__token:not(.is-active):hover { background: var(--soft); }
/* Measures: label, value and a bar each. */
.ui-mockup__meters { display: grid; grid-template-columns: 1fr 1fr; gap: calc(0.8 * var(--u)) calc(2 * var(--u)); padding: calc(1.4 * var(--u)); background: var(--soft); }
.ui-mockup__meter { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: calc(1 * var(--u)); }
.ui-mockup__meter b { font-size: calc(1.8 * var(--u)); }
.ui-mockup__meter small { font-size: calc(1.8 * var(--u)); font-variant-numeric: tabular-nums; }
.ui-mockup__meter i { grid-column: 1 / -1; height: calc(0.7 * var(--u)); background: linear-gradient(var(--ink) 0 0) 0 0 / var(--fill) 100% no-repeat, var(--rule); }
.ui-mockup__masonry.is-selected i { border-color: transparent; background: color-mix(in oklab, var(--plugin-hero-a) 62%, var(--paper)); }
.ui-mockup__masonry.is-selected i:nth-child(3n + 2) { background: color-mix(in oklab, var(--plugin-hero-a) 46%, var(--paper)); }
.ui-mockup__masonry.is-selected i:nth-child(4n) { background: color-mix(in oklab, var(--plugin-hero-a) 78%, var(--paper)); }
/* One image at shrinking icon sizes, standing on one baseline, in the plugin colour. */
.ui-mockup__preview--sizes { justify-content: flex-end; background: repeating-conic-gradient(var(--soft) 0 25%, var(--paper) 0 50%) 0 0 / calc(4 * var(--u)) calc(4 * var(--u)); }
.ui-mockup__sizes { display: flex; align-items: flex-end; gap: calc(2 * var(--u)); }
.ui-mockup__sizes > span { display: flex; flex-direction: column; align-items: center; gap: calc(0.8 * var(--u)); }
.ui-mockup__sizes svg { display: block; height: auto; width: calc(18 * var(--u)); color: color-mix(in oklab, var(--plugin-hero-a) 85%, var(--ink)); }
.ui-mockup__sizes small { font: 700 calc(1.6 * var(--u)) / 1 var(--font-primary); color: var(--quiet); white-space: nowrap; }
/* A code in several colourways, side by side. */
.ui-mockup__preview--qrs { padding: calc(2 * var(--u)); background: var(--soft); }
.ui-mockup__qrs { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(1.6 * var(--u)); align-items: center; }
.ui-mockup__qrs .ui-mockup__plate { width: auto; padding: 6%; }
.ui-mockup__qrs .ui-mockup__plate:nth-child(2) { translate: 0 calc(-1.6 * var(--u)); }
.ui-mockup__sizes > span:nth-child(2) svg { width: calc(11 * var(--u)); }
.ui-mockup__sizes > span:nth-child(3) svg { width: calc(6.4 * var(--u)); }
.ui-mockup__sizes > span:nth-child(4) svg { width: calc(3.8 * var(--u)); }
/* A looping pixel scene fills its pane edge to edge at its own 4:3. */
.ui-mockup__preview--scene, .ui-mockup--cover .ui-mockup__preview--scene { aspect-ratio: 4 / 3; padding: 0; }
.ui-mockup__scene { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }

/* ---------- Cover motions: retro 8/16-bit loops ('motion' in a cover's data, space-separated) ----------
   Frame-by-frame timing like sprites (keyframes held with steps(1)), short loops; all off with
   reduced motion. Each shows what the tool does, from mess to order. Only the covers uiMockup.js
   plays (.is-playing: two covers at random and the hovered one, a page's own window while it is on screen); the rest stand on their finished
   frame, which is the authored state. */
@media (prefers-reduced-motion: no-preference) {
  .ui-mockup[class*="ui-mockup--motion-"]:not(.is-playing), .ui-mockup[class*="ui-mockup--motion-"]:not(.is-playing) :is(*, *::before, *::after) { animation: none !important; }
  /* drop: the rows fall in one after another, frame by frame, hold, blink and clear like a puzzle
     game's line clear, then fall again. */
  .ui-mockup--motion-drop :is(.ui-mockup__card, .ui-mockup__bookmark, .ui-mockup__node, .ui-mockup__message, .ui-mockup__gradient, .ui-mockup__palettes .ui-mockup__strip, .ui-mockup__group, .ui-mockup__greeting, .ui-mockup__progress) {
    animation: ui-mockup-drop 7s steps(1, end) infinite both;
  }
  .ui-mockup--motion-drop :is(.ui-mockup__card, .ui-mockup__bookmark, .ui-mockup__node, .ui-mockup__message, .ui-mockup__gradient, .ui-mockup__strip, .ui-mockup__group):nth-child(2) { animation-delay: 0.25s; }
  .ui-mockup--motion-drop :is(.ui-mockup__card, .ui-mockup__bookmark, .ui-mockup__node, .ui-mockup__message, .ui-mockup__strip, .ui-mockup__group):nth-child(3) { animation-delay: 0.5s; }
  .ui-mockup--motion-drop :is(.ui-mockup__card, .ui-mockup__bookmark, .ui-mockup__node, .ui-mockup__message, .ui-mockup__strip):nth-child(4) { animation-delay: 0.75s; }
  /* Every row its own beat (a tree of six, Indexly, used to drop its last two together). */
  .ui-mockup--motion-drop :is(.ui-mockup__card, .ui-mockup__bookmark, .ui-mockup__node, .ui-mockup__message):nth-child(5) { animation-delay: 1s; }
  .ui-mockup--motion-drop :is(.ui-mockup__card, .ui-mockup__bookmark, .ui-mockup__node, .ui-mockup__message):nth-child(6) { animation-delay: 1.25s; }
  .ui-mockup--motion-drop :is(.ui-mockup__card, .ui-mockup__bookmark, .ui-mockup__node, .ui-mockup__message):nth-child(7) { animation-delay: 1.5s; }
  .ui-mockup--motion-drop :is(.ui-mockup__card, .ui-mockup__bookmark, .ui-mockup__node, .ui-mockup__message):nth-child(n + 8) { animation-delay: 1.75s; }
  .ui-mockup--motion-drop .ui-mockup__progress { animation-delay: 0.2s; }

  /* chaos: layers lie scattered and tilted, then snap frame by frame into the grid, each in turn;
     hold; then scatter again. Arranging by hand is the mess, the plugin is the order. */
  .ui-mockup--motion-chaos .ui-mockup__masonry i { animation: ui-mockup-chaos 7s steps(1, end) infinite both; animation-delay: calc(var(--n) * 0.12s); }

  /* palette: a palette swap, the strips stepping through hues. */
  .ui-mockup--motion-palette .ui-mockup__gradient > b { animation: ui-mockup-palette 9.6s steps(12, end) infinite; }

  /* type: the fields type themselves out behind a blinking cursor. */
  .ui-mockup--motion-type .ui-mockup__text-field { animation: ui-mockup-type 4s steps(14, end) infinite both; }
  .ui-mockup--motion-type .ui-mockup__layer:nth-child(2) .ui-mockup__text-field { animation-delay: 0.8s; }
  .ui-mockup--motion-type .ui-mockup__text-field::after { content: ""; display: inline-block; width: calc(0.9 * var(--u)); height: 1em; margin-left: calc(0.3 * var(--u)); vertical-align: -0.15em; background: currentColor; animation: ui-mockup-cursor 0.8s steps(1, end) infinite; }
}
@keyframes ui-mockup-drop {
  0% { translate: 0 -240%; opacity: 0; }
  2% { translate: 0 -160%; opacity: 1; }
  4% { translate: 0 -80%; }
  6% { translate: 0 -20%; }
  7% { translate: 0 6%; }
  8%, 76% { translate: 0 0; opacity: 1; }
  80%, 86% { opacity: 0; }
  83% { opacity: 1; }
  90%, 100% { opacity: 0; }
}
@keyframes ui-mockup-chaos {
  0%, 12% { translate: var(--sx) var(--sy); rotate: var(--sr); }
  15% { translate: calc(var(--sx) * 0.6) calc(var(--sy) * 0.6); rotate: calc(var(--sr) * 0.6); }
  18% { translate: calc(var(--sx) * 0.25) calc(var(--sy) * 0.25); rotate: calc(var(--sr) * 0.25); }
  21% { translate: 0 -6%; rotate: 0deg; }
  23%, 80% { translate: 0 0; rotate: 0deg; }
  84% { translate: calc(var(--sx) * 0.3) calc(var(--sy) * 0.3); rotate: calc(var(--sr) * 0.3); }
  88%, 100% { translate: var(--sx) var(--sy); rotate: var(--sr); }
}
@keyframes ui-mockup-palette { to { filter: hue-rotate(360deg); } }
@keyframes ui-mockup-type {
  0% { clip-path: inset(0 100% 0 0); }
  40%, 92% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 100% 0 0); }
}
@keyframes ui-mockup-cursor { 50% { opacity: 0; } }

/* The essence fills its cover window: the view runs the window's full height, its rows take the
   room left under a preview, and the last row (the tool's main action) sits at the foot. */
.ui-mockup--cover .ui-mockup__window > .ui-mockup__body { display: flex; flex-direction: column; }
.ui-mockup--cover .ui-mockup__view:not([hidden]) { flex: 1; display: flex; flex-direction: column; }
.ui-mockup--cover .ui-mockup__rows { flex: 1; }
.ui-mockup--cover .ui-mockup__rows > :last-child:not(:first-child) { margin-top: auto; }

/* ---------- Skin 'fluent': a product in its own look (PowerMail, a Windows 11 app) ----------
   Light in both themes, rounded, soft shadows and the body face throughout; the Windows title bar
   with the product mark and its controls. The briefing, its day progress and the mail waiting are
   the app's own parts. */
.ui-mockup--skin-fluent {
  --ink: oklch(22% 0.01 270); --paper: oklch(99% 0.003 270);
  --soft: oklch(96.5% 0.006 270); --rule: oklch(90% 0.008 270); --quiet: oklch(52% 0.01 270);
  --fluent-blue: oklch(52% 0.17 262); --fluent-r: calc(1.2 * var(--u));
}
.ui-mockup--skin-fluent .ui-mockup__window {
  background: var(--soft); border: calc(0.25 * var(--u)) solid var(--rule); border-radius: calc(1.8 * var(--u));
  box-shadow: 0 calc(1.4 * var(--u)) calc(4 * var(--u)) oklch(20% 0.02 270 / 0.28); overflow: hidden;
}
.ui-mockup--skin-fluent .ui-mockup__bar { border-bottom: 0; background: var(--paper); padding-block: calc(1.2 * var(--u)); }
.ui-mockup--skin-fluent .ui-mockup__bar span { font: 600 calc(2.1 * var(--u)) / 1.3 var(--font-secondary); letter-spacing: 0; }
.ui-mockup--skin-fluent .ui-mockup__bar em { font-style: normal; color: var(--quiet); font-size: calc(2 * var(--u)); padding-inline: calc(0.8 * var(--u)); }
.ui-mockup--skin-fluent .ui-mockup__body { -webkit-mask-image: none; mask-image: none; }
.ui-mockup--skin-fluent .ui-mockup__action {
  background: oklch(40% 0.02 260); color: white; border-radius: var(--fluent-r); box-shadow: none;
  font: 600 calc(1.9 * var(--u)) / 1.2 var(--font-secondary); letter-spacing: 0; text-transform: none;
}
.ui-mockup--skin-fluent .ui-mockup__action .ui-mockup__glyph { display: none; }
/* The briefing card: a big greeting, its blue line. */
.ui-mockup__greeting { display: flex; flex-direction: column; gap: calc(0.6 * var(--u)); padding: calc(2 * var(--u)); background: var(--paper); border: calc(0.25 * var(--u)) solid var(--rule); border-radius: var(--fluent-r, 0); }
.ui-mockup__greeting b { font: 700 calc(4.4 * var(--u)) / 1.05 var(--font-secondary); letter-spacing: -0.02em; }
.ui-mockup__greeting span { color: var(--fluent-blue, var(--quiet)); font-size: calc(2 * var(--u)); }
/* Day progress: bars of the day's mail over a timeline with the time now. */
.ui-mockup__progress { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: calc(1 * var(--u)); padding: calc(1.6 * var(--u)) calc(2 * var(--u)); background: var(--paper); border: calc(0.25 * var(--u)) solid var(--rule); border-radius: var(--fluent-r, 0); }
.ui-mockup__progress small { font-size: calc(1.5 * var(--u)); font-weight: 700; letter-spacing: 0.1em; color: var(--quiet); }
.ui-mockup__progress em { justify-self: end; padding: calc(0.2 * var(--u)) calc(0.9 * var(--u)); border-radius: calc(0.6 * var(--u)); background: oklch(93% 0.07 85); color: oklch(42% 0.09 70); font: 600 calc(1.6 * var(--u)) / 1.3 var(--font-secondary); font-style: normal; font-variant-numeric: tabular-nums; }
.ui-mockup__progress > span { grid-column: 1 / -1; display: flex; align-items: flex-end; gap: calc(0.6 * var(--u)); height: calc(7 * var(--u)); }
.ui-mockup__progress > span i { flex: 1; height: var(--h); border-radius: calc(0.3 * var(--u)) calc(0.3 * var(--u)) 0 0; background: oklch(88% 0.04 270); }
.ui-mockup__progress > b { grid-column: 1 / -1; height: calc(0.5 * var(--u)); border-radius: 99px; background: linear-gradient(90deg, oklch(80% 0.16 75) 0 12%, oklch(62% 0.15 262) 12% 58%, oklch(60% 0.2 320) 58% 70%, oklch(85% 0.03 262) 70%); }
/* Mail waiting: initials, sender, two quiet lines, its action. */
.ui-mockup__messages { display: flex; flex-direction: column; gap: calc(1 * var(--u)); }
.ui-mockup__message { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: calc(1.4 * var(--u)); padding: calc(1.3 * var(--u)) calc(1.6 * var(--u)); background: var(--paper); border: calc(0.25 * var(--u)) solid var(--rule); border-radius: var(--fluent-r, 0); }
.ui-mockup__message > i { display: grid; place-items: center; width: calc(4.6 * var(--u)); aspect-ratio: 1; border-radius: 50%; background: oklch(92% 0.04 262); color: oklch(45% 0.12 262); font: 600 calc(1.6 * var(--u)) / 1 var(--font-secondary); font-style: normal; }
.ui-mockup__message:nth-child(2) > i { background: oklch(93% 0.04 300); color: oklch(45% 0.12 300); }
.ui-mockup__message > span { display: flex; flex-direction: column; gap: calc(0.6 * var(--u)); min-width: 0; }
.ui-mockup__message b { font-size: calc(2 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-mockup__message u { display: block; height: calc(0.7 * var(--u)); width: 90%; border-radius: 99px; background: var(--rule); text-decoration: none; }
.ui-mockup__message u + u { width: 60%; }
.ui-mockup__message em { padding: calc(0.5 * var(--u)) calc(1.2 * var(--u)); border-radius: calc(0.6 * var(--u)); background: var(--soft); font: 500 calc(1.6 * var(--u)) / 1.3 var(--font-secondary); font-style: normal; }
.ui-mockup__message:last-child em { background: oklch(40% 0.02 260); color: white; }
/* Skeleton: a label left empty is a quiet bar, a button left empty a blank chip (shape-only covers). */
.ui-mockup__skel { display: block; height: calc(1.1 * var(--u)); width: 55%; border-radius: 99px; background: var(--rule); text-decoration: none; }
.ui-mockup__progress > .ui-mockup__skel { width: 40%; }
.ui-mockup__skel-chip { min-width: calc(7 * var(--u)); min-height: calc(2.6 * var(--u)); }
.ui-mockup__progress .ui-mockup__skel-chip { min-width: calc(5 * var(--u)); }

/* ---------- Dither on the cartridge covers ----------
   Classic ordered dither instead of soft shading: the cover's backdrop is redrawn as a dithered
   pixel image (uiMockup.js), and the cover's main action takes band shading, its lower part a 2px
   checker of the paper and ink, so it stays a solid button with a retro edge (PowerMail's own
   Windows look, skin fluent, keeps its button). */
.ui-mockup--cover:not(.ui-mockup--skin-fluent) .ui-mockup__action {
  background: linear-gradient(var(--ink) 0 0) top / 100% 55% no-repeat,
    repeating-conic-gradient(color-mix(in oklab, var(--paper) 22%, var(--ink)) 0 25%, var(--ink) 0 50%) 0 0 / 4px 4px;
}

/* A cover has no dead band above its action: the row before it (the tool's main list) takes the
   height left, a cover's notes share it evenly and its palettes stretch to it; the bookmark list
   drops its small caption lines and the "Add a note" line for room. */
.ui-mockup--cover .ui-mockup__rows > :nth-last-child(2):not(:first-child:last-child) { flex: 1 1 auto; min-height: 0; }
.ui-mockup--cover .ui-mockup__rows > .ui-mockup__cards { display: flex; }
.ui-mockup--cover .ui-mockup__rows > .ui-mockup__cards .ui-mockup__card { flex: 1 1 0; justify-content: center; }
.ui-mockup--cover .ui-mockup__rows > .ui-mockup__palettes { grid-auto-rows: 1fr; }
.ui-mockup--cover .ui-mockup__rows > .ui-mockup__palettes .ui-mockup__strip { height: auto; min-height: calc(3 * var(--u)); }
.ui-mockup--cover .ui-mockup__bookmark small, .ui-mockup--cover .ui-mockup__notes em { display: none; }

/* ---------- A single plugin panel beside the copy (desktop, aurora) ---------- */
/* The panel stands as the plugin does, a 2:3 portrait, and spans the copy column: the stage runs
   from the title's cap line to the foot of the facts row, the window fills its height (or its
   width, on a narrow column) and the body crops and fades at the foot like a scrolled panel,
   while the footer keeps the bottom. Wide screens with a preview pane keep their own layout. */
@media (min-width: 961px) {
  .plugin-hero--aurora .plugin-hero__inner:has(.ui-mockup--single:not(.ui-mockup--cover)) { align-items: stretch; }
  .plugin-hero--aurora .plugin-hero__stage:has(> .ui-mockup--single:not(.ui-mockup--cover)) {
    flex: 1 1 0px; aspect-ratio: auto; min-height: 420px;
    margin-top: calc(26.5px + var(--space-md) + 0.09em);
  }
  .ui-mockup--single:not(.ui-mockup--cover) {
    --ar: 0.66;
    --ww: min(100cqw - 2 * var(--pad), 100cqh * 0.97 * var(--ar));
    --u: calc(var(--ww) / 66);
  }
  .ui-mockup--single:not(.ui-mockup--cover) .ui-mockup__window {
    top: 0; translate: none; height: calc(var(--ww) / var(--ar)); max-height: calc(100cqh - 1.8 * var(--u));
  }
  .ui-mockup--single:not(.ui-mockup--cover) .ui-mockup__window > :is(.ui-mockup__body, .ui-mockup__shell) { flex: 1 1 auto; }
}