/* ==========================================================================
   Cyber City · product page v1.0 · 2026-10-03 (step 3.3, direction A round 2, approved by Rayan on 3 Oct 2026)
   His notes of the same day are in: a smaller photo on its stage; photos that change in place, by themselves and by
   hand; more of the identity around the photo (the lime corner pixels of the pixel cursor's frame, the dot grid, the
   floor line the current runs along at each change, a dot-matrix counter and a row of voxels that charge with the
   timer); a zoom that follows the mouse and eases in, inside the stage.
   Loaded on a product page only, after pages.css. Rules (tools/check-product.mjs reads them as a lint): every class
   starts with ecc- (states: is-*); colours, fonts, radii, durations and spaces are tokens; the only written lengths
   are the hairlines (1px, 2px) and the breakpoints. Nothing floats or sticks: nothing is ever painted over anything
   else, the zoom stays inside its stage and the comparison opens in the page.
   Mobile first: the phone layout is the base; 761px and 1181px add the wider ones.

   Contents
   1 the page · 2 the photos · 3 the words beside them · 4 the panels · 5 the comparison · 6 what goes with it ·
   7 rows of cards · 8 without a script, less motion, forced colours, print
   ========================================================================== */

/* ================================================================= 1 · THE PAGE */
.ecc-pd { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ecc-gap); }
.ecc-pd > * { grid-column: 1 / -1; min-width: 0; margin: 0; }
.ecc-pd > [hidden] { display: none; }
.ecc-pd__main { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ecc-gap); align-items: start; }
.ecc-pd__main > * { grid-column: 1 / -1; min-width: 0; }

/* ================================================================ 2 · THE PHOTOS */
.ecc-pd__media { display: grid; gap: var(--ecc-gap); align-content: start; }
.ecc-pd__frame { position: relative; display: grid; gap: var(--ecc-s-2); padding: var(--ecc-gap); }
/* the pixel cursor's frame at rest: the product on show is the chosen one */
.ecc-pd__corners { --p: calc(var(--ecc-s-1) + 2px); position: absolute; inset: var(--ecc-s-1); pointer-events: none; }
.ecc-pd__stage { aspect-ratio: 4 / 3; touch-action: pan-y pinch-zoom; }
/* the quiet dot grid of the studio, only toward the edges: the product keeps a clean field around it */
.ecc-pd__dots { position: absolute; inset: 0; pointer-events: none; -webkit-mask-image: radial-gradient(closest-side, transparent 58%, black); mask-image: radial-gradient(closest-side, transparent 58%, black); }
/* the box the photo stands in, blending with the studio light: on a phone the product keeps most of the stage; on a
   desktop it is a touch smaller than before (Rayan, 3 Oct) and the stage a little shorter, so the readout under it
   shows on the first screen */
.ecc-pd__box { left: 9%; right: 9%; top: 8%; bottom: 10%; mix-blend-mode: multiply; }
.ecc-pd__box > .ecc-pd__photo,
.ecc-pd__box > .ecc-pd__hi {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%;
  filter: brightness(1.04); /* makers' near-white melts into the stage (v0.6.3) */
  transform-origin: 50% 50%;
}
/* a change of photo: the new one comes in a breath larger and settles, the old one fades under it */
.ecc-pd__photo { opacity: 0; scale: 1.025; transition: opacity var(--ecc-d-slow) var(--ecc-ease-out), scale var(--ecc-d-slow) var(--ecc-ease-out); }
.ecc-pd__photo.is-on { opacity: 1; scale: 1; }
.ecc-pd__photo.is-out { opacity: 0; scale: 1; }
/* the large file of the same photo, for the zoom: it fades in over the photo once it has loaded */
.ecc-pd__hi { opacity: 0; pointer-events: none; transition: opacity var(--ecc-d-base) var(--ecc-ease-out); }
.ecc-pd__hi.is-ready { opacity: 1; }
/* while the zoom is on: brackets lock onto the stage, the way the system frames what is being measured */
.ecc-pd__lock { position: absolute; inset: var(--ecc-s-3); z-index: var(--ecc-z-raised); pointer-events: none; opacity: 0; scale: 1.03; transition: opacity var(--ecc-d-base) var(--ecc-ease-out), scale var(--ecc-d-base) var(--ecc-ease-out); }
.ecc-pd__stage.is-zoom .ecc-pd__lock { opacity: 1; scale: 1; }

/* the readout under the stage: back, the counter, the voxels, pause, next */
.ecc-pd__bar { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--ecc-s-2); }
.ecc-pd__count { display: flex; align-items: baseline; gap: var(--ecc-s-2); margin: 0; white-space: nowrap; }
.ecc-pd__count .ecc-dot { font-size: var(--ecc-t-h2); } /* the dot face: 24px or more on a light surface */
.ecc-pd__count .ecc-mono { color: var(--ecc-ink-2); }
.ecc-pd__segs { display: flex; align-items: center; gap: var(--ecc-s-1); min-width: 0; margin: 0; padding: 0 var(--ecc-s-2); list-style: none; }
.ecc-pd__seg { position: relative; flex: 1 1 0; min-width: var(--ecc-s-1); max-width: var(--ecc-s-3); aspect-ratio: 1 / 1; border-radius: var(--ecc-r-voxel); background: var(--ecc-line); overflow: hidden; }
.ecc-pd__seg.is-seen { background: var(--ecc-line-strong); }
.ecc-pd__seg::after { content: ""; position: absolute; inset: 0; background: var(--ecc-spark); transform-origin: 0 50%; scale: 0 1; }
/* the voxel of the photo on show: lit whole, or charging with the timer (--p, set by product.js) */
.ecc-pd__seg.is-on::after { scale: var(--p, 1) 1; }
.ecc-pd__pause[hidden] { display: none; }
.ecc-pd__pause .ecc-icon + .ecc-icon { display: none; }
.ecc-pd__pause.is-paused .ecc-icon:first-child { display: none; }
.ecc-pd__pause.is-paused .ecc-icon + .ecc-icon { display: block; }

/* the small photos: one row that scrolls sideways on purpose; the page never does */
.ecc-pd__thumbs { display: flex; gap: var(--ecc-gap); margin: 0; padding: var(--ecc-s-1) var(--ecc-s-1) var(--ecc-s-2); list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; }
.ecc-pd__thumbs > li { flex: none; scroll-snap-align: start; }
.ecc-pd__thumb {
  position: relative; display: block; isolation: isolate; width: calc(var(--ecc-s-8) + var(--ecc-s-2)); aspect-ratio: 1 / 1;
  padding: var(--ecc-s-1); border: 1px solid var(--ecc-line); border-radius: var(--ecc-r-sm);
  background: var(--ecc-stage-studio); cursor: pointer;
}
.ecc-pd__thumbimg { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; filter: brightness(1.04); }
.ecc-pd__thumb[aria-current="true"] { border-color: var(--ecc-ink); }
.ecc-pd__thumb[aria-current="true"]::after {
  content: ""; position: absolute; inset: calc(var(--ecc-s-1) * -1); pointer-events: none;
  background:
    linear-gradient(var(--ecc-spark) 0 0) 0 0 / var(--ecc-s-1) var(--ecc-s-1),
    linear-gradient(var(--ecc-spark) 0 0) 100% 0 / var(--ecc-s-1) var(--ecc-s-1),
    linear-gradient(var(--ecc-spark) 0 0) 0 100% / var(--ecc-s-1) var(--ecc-s-1),
    linear-gradient(var(--ecc-spark) 0 0) 100% 100% / var(--ecc-s-1) var(--ecc-s-1);
  background-repeat: no-repeat;
}
@media (hover: hover) and (pointer: fine) {
  .ecc-pd__thumb:hover { border-color: var(--ecc-control-line); }
}

/* ===================================================== 3 · THE WORDS BESIDE THEM */
.ecc-pd__info { display: grid; gap: var(--ecc-s-4); align-content: start; }
.ecc-pd__info > * { margin: 0; }
.ecc-pd__cat { display: flex; align-items: center; gap: var(--ecc-s-2); color: var(--ecc-ink-2); overflow-wrap: anywhere; }
.ecc-pd__title { overflow-wrap: anywhere; text-wrap: balance; }
/* the rules of a product (the law, the maker's class): close to its name, before anything that sells it */
.ecc-pd__rules { display: grid; gap: var(--ecc-s-2); justify-items: start; padding: var(--ecc-s-3) var(--ecc-s-4); border-radius: var(--ecc-r-sm); background: var(--ecc-wash); }
.ecc-pd__rules p,
.ecc-pd__ruleline { display: flex; align-items: flex-start; gap: var(--ecc-s-2); margin: 0; font-size: var(--ecc-t-small); line-height: 1.45; }
.ecc-pd__rules .ecc-icon,
.ecc-pd__ruleline .ecc-icon { flex: none; margin-top: calc(var(--ecc-s-1) / 2); }
.ecc-pd__lead { max-width: 34em; color: var(--ecc-ink-2); overflow-wrap: anywhere; }
.ecc-pd__lead > * { margin: 0; }
.ecc-pd__lead > * + * { margin-top: var(--ecc-s-2); }
.ecc-pd__nums { display: flex; flex-wrap: wrap; gap: var(--ecc-s-4) var(--ecc-s-7); padding: var(--ecc-s-3) 0; border-top: 1px solid var(--ecc-line); border-bottom: 1px solid var(--ecc-line); }
.ecc-pd__nums > div { display: grid; gap: var(--ecc-s-1); }
.ecc-pd__nums dt { color: var(--ecc-ink-2); }
.ecc-pd__nums dd { margin: 0; font-size: var(--ecc-t-h1); white-space: nowrap; }
.ecc-pd__colors { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ecc-s-2); }
.ecc-pd__colors .ecc-mono { margin-right: var(--ecc-s-2); color: var(--ecc-ink-2); }
.ecc-pd__status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ecc-s-2) var(--ecc-s-3); }
/* the options (ecc-core 0.11.0): the name and the value chosen, then the values; a colour with its own dot */
.ecc-pd__opt { margin: 0; padding: 0; border: 0; min-width: 0; }
.ecc-pd__optname { margin-bottom: var(--ecc-s-2); padding: 0; color: var(--ecc-ink-2); }
.ecc-pd__optname span { color: var(--ecc-ink); }
.ecc-pd__optvals { display: flex; flex-wrap: wrap; gap: var(--ecc-s-2); }
.ecc-pd__optval[aria-checked="true"] { border-color: var(--ecc-ink); box-shadow: inset 0 0 0 1px var(--ecc-ink); }
.ecc-pd__optval[data-out] span:not(.ecc-pd__sw) { text-decoration: line-through; color: var(--ecc-ink-2); }
.ecc-pd__sw { display: inline-block; inline-size: var(--ecc-s-3); block-size: var(--ecc-s-3); margin-right: var(--ecc-s-2); border: 1px solid var(--ecc-line-strong); border-radius: var(--ecc-r-voxel); background: var(--sw, transparent); }
.ecc-pd__cmp { gap: var(--ecc-s-2); }
.ecc-pd__cmpnote { margin: 0; color: var(--ecc-ink-2); }
.ecc-pd__cmpnote:empty { display: none; }
.ecc-pd__acts { display: flex; flex-wrap: wrap; gap: var(--ecc-s-2) var(--ecc-s-3); }
.ecc-pd__price { max-width: 30em; }
/* the phone number in the line: a 44px tall hit area around the words, as on the policy pages */
.ecc-pd__price .ecc-link { position: relative; }
.ecc-pd__price .ecc-link::after { content: ""; position: absolute; inset: calc((var(--ecc-s-3) + var(--ecc-s-1)) * -1) calc(var(--ecc-s-1) / -2); }
.ecc-pd__also { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--ecc-s-4); margin: 0; padding: 0; list-style: none; }
.ecc-pd__also li { display: flex; align-items: center; gap: var(--ecc-s-2); min-height: var(--ecc-hit); border-top: 1px solid var(--ecc-line); font-size: var(--ecc-t-small); font-weight: var(--ecc-fw-medium); }
.ecc-pd__also a { display: inline-flex; align-items: center; min-height: var(--ecc-hit); }

/* ================================================================ 4 · THE PANELS */
.ecc-pd__tabs { display: grid; padding: var(--ecc-s-2); }
.ecc-pd__tablist { display: flex; gap: var(--ecc-s-1); padding: var(--ecc-s-1); border-radius: var(--ecc-r); background: var(--ecc-wash); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.ecc-pd__tab {
  flex: none; min-height: var(--ecc-hit); padding: 0 var(--ecc-s-4); border: 0; border-radius: var(--ecc-r-sm);
  background: transparent; color: var(--ecc-ink-2); font: inherit; font-weight: var(--ecc-fw-medium); white-space: nowrap; cursor: pointer;
  transition: background var(--ecc-d-fast) var(--ecc-ease-out), color var(--ecc-d-fast) var(--ecc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .ecc-pd__tab:hover { color: var(--ecc-ink); } }
.ecc-pd__tab[aria-selected="true"] { background: var(--ecc-selected-bg); color: var(--ecc-selected-fg); }
.ecc-pd__panel { display: grid; gap: var(--ecc-s-4); align-content: start; padding: var(--ecc-s-5) var(--ecc-s-4) var(--ecc-s-4); }
.ecc-pd__panel[hidden] { display: none; }
.ecc-js .ecc-pd__ph { display: none; } /* with a script the button names the panel (aria-labelledby) */
.ecc-pd__ph { margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  .ecc-pd__panel { animation: ecc-pd-in var(--ecc-d-base) var(--ecc-ease-out); }
}
@keyframes ecc-pd-in { from { opacity: 0; translate: 0 var(--ecc-s-2); } }
.ecc-pd__text { max-width: 42em; }
.ecc-pd__text > * { margin: 0; }
.ecc-pd__text > * + * { margin-top: var(--ecc-s-3); }
.ecc-pd__spec { margin: 0; }
.ecc-pd__spec dt,
.ecc-pd__spec dd { overflow-wrap: anywhere; }
.ecc-pd__src { margin: 0; color: var(--ecc-ink-2); }
.ecc-pd__two { display: grid; gap: var(--ecc-s-5); }
.ecc-pd__label { display: flex; align-items: center; gap: var(--ecc-s-2); margin: 0 0 var(--ecc-s-2); }
.ecc-pd__pipno { background: var(--ecc-ink-2); }
.ecc-pd__lines { display: grid; margin: 0; padding: 0; list-style: none; }
.ecc-pd__lines li { display: flex; align-items: flex-start; gap: var(--ecc-s-3); padding: var(--ecc-s-2) 0; border-top: 1px solid var(--ecc-line); line-height: 1.45; }
.ecc-pd__lines .ecc-pad { margin-top: var(--ecc-s-1); }
.ecc-pd__rider { max-width: 34em; }
.ecc-pd__video,
.ecc-pd__player { display: block; width: 100%; max-width: calc(var(--ecc-s-9) * 8); aspect-ratio: 16 / 9; border-radius: var(--ecc-r); background: var(--ecc-panel); }
.ecc-pd__video { position: relative; padding: 0; border: 0; overflow: hidden; cursor: pointer; }
.ecc-pd__player { border: 0; }
.ecc-pd__vimg { width: 100%; height: 100%; object-fit: contain; opacity: .5; }
.ecc-pd__play {
  position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: var(--ecc-s-8); height: var(--ecc-s-8);
  translate: -50% -50%; border-radius: var(--ecc-r-sm); background: var(--ecc-lime); color: var(--ecc-on-lime);
  transition: scale var(--ecc-d-fast) var(--ecc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .ecc-pd__video:hover .ecc-pd__play { scale: 1.06; } }
.ecc-pd__vcap { margin: 0; color: var(--ecc-ink-2); }
.ecc-pd__qh { margin: 0; font-size: var(--ecc-t-body-lg); font-weight: var(--ecc-fw-strong); line-height: 1.3; }
.ecc-pd__more { display: flex; flex-wrap: wrap; gap: var(--ecc-s-2) var(--ecc-s-6); margin: 0; }

/* ============================================================ 5 · THE COMPARISON */
/* in the page, never over it; no photo and no name is cut */
.ecc-pd__compare { display: grid; gap: var(--ecc-s-4); }
.ecc-pd__cmphead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ecc-s-3) var(--ecc-s-5); }
.ecc-pd__cmphead > * { margin: 0; }
.ecc-pd__cmphead .ecc-h2 { margin-right: auto; }
.ecc-pd__cmpbody { overflow-x: auto; overscroll-behavior-x: contain; }
.ecc-pd__ctable { width: 100%; min-width: calc(var(--ecc-s-9) * 6); border-collapse: collapse; table-layout: fixed; }
.ecc-pd__ctable th,
.ecc-pd__ctable td { padding: var(--ecc-s-3); border-top: 1px solid var(--ecc-line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.ecc-pd__ctable thead th { border-top: 0; font-weight: var(--ecc-fw-strong); line-height: 1.3; }
.ecc-pd__ctable thead th:first-child { width: 22%; }
.ecc-pd__ctable thead a { color: var(--ecc-ink); }
.ecc-pd__cimg { display: block; position: relative; isolation: isolate; width: 100%; aspect-ratio: 4 / 3; margin-bottom: var(--ecc-s-2); border-radius: var(--ecc-r-sm); background: var(--ecc-stage-studio); }
.ecc-pd__cimg img { width: 100%; height: 100%; padding: 6%; box-sizing: border-box; object-fit: contain; mix-blend-mode: multiply; filter: brightness(1.04); }
.ecc-pd__ctable tbody th { color: var(--ecc-ink-2); font-weight: var(--ecc-fw-medium); }
.ecc-pd__ctable tr.is-diff td { background: var(--ecc-wash); }
.ecc-pd__compare.is-diff tr.is-same { display: none; }
.ecc-pd__cmpask { margin: 0; }

/* ============================================================ 6 · WHAT GOES WITH IT */
.ecc-pd__set .ecc-h2 { margin: 0 0 var(--ecc-s-4); }
.ecc-pd__setrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ecc-s-3); }
.ecc-pd__setitem { display: grid; gap: var(--ecc-s-2); width: calc(var(--ecc-s-9) * 1.8); font-weight: var(--ecc-fw-medium); line-height: 1.3; }
label.ecc-pd__setitem { cursor: pointer; }
.ecc-pd__setstage { display: block; aspect-ratio: 1 / 1; }
.ecc-pd__plus { font-size: var(--ecc-t-h2); color: var(--ecc-ink-2); }
.ecc-pd__setask { display: grid; gap: var(--ecc-s-2); margin-left: var(--ecc-s-4); }
.ecc-pd__setask p { margin: 0; }

/* ============================================================== 7 · ROWS OF CARDS */
/* they scroll sideways on purpose; the page never does */
.ecc-pd__rowhead { display: flex; align-items: center; justify-content: space-between; gap: var(--ecc-s-3); margin-bottom: var(--ecc-s-4); }
.ecc-pd__rowhead .ecc-h2 { margin: 0; }
.ecc-pd__arrows { display: flex; gap: var(--ecc-s-2); }
.ecc-pd__track { display: grid; grid-auto-flow: column; grid-auto-columns: 62%; gap: var(--ecc-gap); margin: 0; padding: 0 0 var(--ecc-s-2); list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.ecc-pd__card { display: grid; gap: var(--ecc-s-2); align-content: start; scroll-snap-align: start; }
.ecc-pd__cardlink { display: grid; gap: var(--ecc-s-2); color: var(--ecc-ink); text-decoration: none; }
.ecc-pd__cardstage { display: block; aspect-ratio: 1 / 1; }
.ecc-pd__cardstage .ecc-stage__box,
.ecc-pd__setstage .ecc-stage__box { left: 8%; right: 8%; top: 8%; bottom: 8%; mix-blend-mode: multiply; }
.ecc-pd__cardstage .ecc-stage__box > img,
.ecc-pd__setstage .ecc-stage__box > img { object-position: 50% 50%; filter: brightness(1.04); }
.ecc-pd__cardname { font-weight: var(--ecc-fw-medium); line-height: 1.3; overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) {
  .ecc-pd__cardlink:hover .ecc-pd__cardname { text-decoration: underline; text-decoration-color: var(--ecc-spark); text-decoration-thickness: 2px; text-underline-offset: var(--ecc-s-1); }
}
.ecc-pd__card .ecc-pd__cmp { justify-self: start; }

/* the wider layouts */
@media (min-width: 761px) {
  .ecc-pd__two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ecc-pd__track { grid-auto-columns: calc(var(--ecc-s-9) * 2.4); }
}
@media (min-width: 1181px) {
  .ecc-pd__media { grid-column: 1 / span 7; }
  .ecc-pd__info { grid-column: 8 / -1; }
  .ecc-pd__stage { aspect-ratio: 3 / 2; }
  .ecc-pd__box { left: 14%; right: 14%; top: 11%; bottom: 13%; }
  .ecc-pd__tablist { flex-wrap: wrap; overflow: visible; }
}
@media (max-width: 760px) {
  .ecc-pd__acts .ecc-btn { flex: 1 1 100%; }
  .ecc-pd__nums dd { font-size: var(--ecc-t-h2); }
  .ecc-pd__also { grid-template-columns: minmax(0, 1fr); }
  .ecc-pd__arrows { display: none; }
  .ecc-pd__setask { margin-left: 0; width: 100%; }
}

/* ========================================= 8 · WITHOUT A SCRIPT, LESS MOTION, PRINT */
/* without a script: one photo, every panel under its own heading, no comparison */
html:not(.ecc-js) .ecc-pd__bar,
html:not(.ecc-js) .ecc-pd__thumbs,
html:not(.ecc-js) .ecc-pd__tablist,
html:not(.ecc-js) .ecc-pd__status { display: none; }
html:not(.ecc-js) .ecc-pd__panel[hidden] { display: grid !important; } /* foundations.css holds [hidden] with !important */
@media (prefers-reduced-motion: reduce) {
  .ecc-pd__photo, .ecc-pd__hi, .ecc-pd__lock, .ecc-pd__play, .ecc-pd__tab { transition: none; }
  .ecc-pd__panel { animation: none; }
}
html[data-ecc-motion="paused"] :is(.ecc-pd__photo, .ecc-pd__hi, .ecc-pd__lock, .ecc-pd__play, .ecc-pd__tab) { transition: none; }
html[data-ecc-motion="paused"] .ecc-pd__panel { animation: none; }
@media (forced-colors: active) {
  .ecc-pd__tab[aria-selected="true"],
  .ecc-pd__thumb[aria-current="true"] { outline: 2px solid Highlight; }
  .ecc-pd__seg.is-on { background: Highlight; }
}
@media print {
  .ecc-pd__bar, .ecc-pd__thumbs, .ecc-pd__tablist, .ecc-pd__status, .ecc-pd__acts, .ecc-pd__compare, .ecc-pd__row, .ecc-pd__set, .ecc-pd__corners, .ecc-pd__lock { display: none !important; }
  .ecc-pd__panel[hidden] { display: grid !important; }
  .ecc-js .ecc-pd__ph { display: block; }
}

/* a studio video in the gallery (theme 0.11.0): its own dark scene, so no multiply and no lift; a play mark on its thumb */
.ecc-pd__clip { mix-blend-mode: normal; filter: none; object-fit: contain; background: var(--ecc-panel); border-radius: var(--ecc-r-sm); } /* the gallery's studio video (not .ecc-pd__video: that is the maker's video button, with a width limit) */
/* A scene (a picture or a video the studio made, with its own background) fills the whole stage, edge to edge (Rayan,
   4 Oct 2026: it stood small in the box with wide white margins). It reaches out of the box to the stage's edges (the
   box's insets as a share of the box: left 9/82 and top 8/82 with 100/82 for its size on a phone; 14/72, 11/76, 100/72 and 100/76 from 1181px), covers,
   keeps a square picture's head in view (50% 36%), and does not blend with the studio light; the floor line and the dot grid step aside while it shows. */
.ecc-pd__box > .ecc-pd__scene { inset: auto; left: -10.976%; top: -9.756%; width: 121.951%; height: 121.951%; object-fit: cover; object-position: 50% 36%; filter: none; background: var(--ecc-panel); border-radius: 0; }
.ecc-pd__box:has(> .ecc-pd__scene.is-on) { mix-blend-mode: normal; }
.ecc-pd__stage:has(.ecc-pd__scene.is-on) :is(.ecc-floorline, .ecc-pd__dots) { opacity: 0; }
/* a maker's photo with its own background (people, a street, an advert with words): it fills the stage's height whole,
   nothing cut, and the sides take its own colours, softly blurred */
.ecc-pd__box > .ecc-pd__scene--fit { object-fit: contain; object-position: 50% 50%; background: transparent; }
.ecc-pd__amb { position: absolute; inset: 0; opacity: 0; pointer-events: none; background: var(--pd-amb, none) 50% 50% / cover no-repeat; filter: blur(var(--ecc-s-5)) saturate(1.1) brightness(.82); transform: scale(1.15); transition: opacity var(--ecc-d-slow) var(--ecc-ease-out); }
.ecc-pd__stage.is-fit .ecc-pd__amb { opacity: 1; }
.ecc-pd__thumb:has(> .ecc-pd__scene) { padding: 0; overflow: hidden; }
.ecc-pd__thumbimg.ecc-pd__scene { object-fit: cover; mix-blend-mode: normal; filter: none; }
@media (min-width: 1181px) { .ecc-pd__box > .ecc-pd__scene { left: -19.444%; top: -14.474%; width: 138.889%; height: 131.579%; } }
.ecc-pd__thumb { position: relative; }
.ecc-pd__thumbplay { position: absolute; right: var(--ecc-s-1); bottom: var(--ecc-s-1); display: grid; place-items: center; padding: var(--ecc-s-1); border-radius: var(--ecc-r-sm); background: var(--ecc-ink); color: var(--ecc-lime); }