/* ==========================================================================
   Cyber City · Pixel kit v1.2 · 2026-10-02
   Tokens (Day + Night) and the kit components: pixel cursor, loading screen,
   voxel stage, dynamic product tile, lime light field, Day/Night switch.
   Day   = direction B: aluminium canvas, studio-white tiles, lime ink on light.
   Night = direction A: void, wall, plinth, case-light pools, lime current lines.
   Day is the default: with no data-theme on <html> the page is Day. Night is only
   <html data-theme="night">, set by the visitor's press on the switch.
   Lime #A2EA0A is the only accent. On light surfaces it becomes lime ink #4A7900.
   Framework-free. Pairs with pixel-kit.js (window.PixelKit).
   ========================================================================== */

/* -------------------------------------------------------------- tokens · Day */
/* One source of truth: every --pk-* value resolves to its --ecc-* design token (tokens.css, built from
   tokens.json: load it before this file). The second value inside each var() is the same value written out,
   so the kit still looks the same on a page that does not load tokens.css. */
:root,
:root[data-theme="day"] {
  color-scheme: light;
  --pk-canvas: var(--ecc-canvas, #E6E7E4);            /* aluminium page canvas */
  --pk-surface: var(--ecc-surface, #F7F7F5);          /* studio-white tiles */
  --pk-surface-2: var(--ecc-chrome, #C8C8C8);         /* chrome tile */
  --pk-surface-border: var(--ecc-surface-border, transparent);
  --pk-panel: var(--ecc-panel, #0B0D0C);              /* night panels (hero, logo tile) stay dark in Day */
  --pk-panel-2: var(--ecc-panel-2, #2E3230);          /* graphite panel */
  --pk-panel-border: var(--ecc-panel-border, transparent);
  --pk-ink: var(--ecc-ink, #0B0D0C);                  /* text on canvas and tiles: 15.7:1 on canvas */
  --pk-ink-2: var(--ecc-ink-2, #474D49);              /* secondary text: 6.97:1 on canvas */
  --pk-on-panel: var(--ecc-on-panel, #EEEFEC);        /* text on panels: 16.9:1 */
  --pk-on-panel-2: var(--ecc-on-panel-2, #A3A9A5);    /* secondary on panels: 8.1:1 */
  --pk-line: var(--ecc-line, rgba(11, 13, 12, .12));
  --pk-line-strong: var(--ecc-line-strong, rgba(11, 13, 12, .28));
  --pk-control-line: var(--ecc-control-line, #474D49); /* control borders (non-text contrast >= 3:1) */
  --pk-lime: var(--ecc-lime, #A2EA0A);
  --pk-spark: var(--ecc-spark, #4A7900);              /* lime as lines, dots and text on light (4.86:1 on tiles) */
  --pk-focus: var(--ecc-focus, #0B0D0C);
  --pk-btn-bg: var(--ecc-btn-bg, #0B0D0C);
  --pk-btn-fg: var(--ecc-btn-fg, #EEEFEC);
  --pk-btn-pip: var(--ecc-btn-pip, #A2EA0A);
  --pk-btn-hover: var(--ecc-btn-hover, #2E3230);
  /* stage lighting: layer opacities crossfade between the two looks */
  --pk-stage-day: var(--ecc-stage-day, 1);
  --pk-stage-night: var(--ecc-stage-night, 0);
  --pk-img-filter: var(--ecc-stage-img-filter, drop-shadow(0 0 0 rgba(237, 239, 238, 0)) drop-shadow(0 16px 18px rgba(11, 13, 12, .20)) brightness(1) contrast(1));
  /* stage light recipes: the same in both themes, the two opacities above pick the look */
  --pk-stage-studio: var(--ecc-stage-studio, radial-gradient(ellipse 70% 55% at 50% 42%, #FFFFFF 0%, #F4F5F2 45%, #DFE1DD 100%));
  --pk-stage-pool: var(--ecc-stage-pool, radial-gradient(62% 58% at 50% 46%, rgba(234, 219, 196, .17), rgba(234, 219, 196, .05) 58%, transparent 82%), #181C1A);
  --pk-stage-floor-shadow: var(--ecc-stage-floor-shadow, radial-gradient(closest-side, rgba(11, 13, 12, .18), rgba(11, 13, 12, 0)));
  --pk-stage-floor-pool: var(--ecc-stage-floor-pool, radial-gradient(closest-side, rgba(234, 219, 196, .2), rgba(234, 219, 196, .06) 55%, transparent));
  --pk-stage-hairline: var(--ecc-stage-hairline, linear-gradient(90deg, transparent, #2E3230 12%, #2E3230 88%, transparent));
  --pk-stage-current: var(--ecc-stage-current, linear-gradient(90deg, transparent, #A2EA0A 30%, #A2EA0A 70%, transparent));
  --pk-stage-current-glow: var(--ecc-stage-current-glow, 0 0 10px rgba(162, 234, 10, .5));
  /* lime light field */
  --pk-field: var(--ecc-lime, #A2EA0A);
  --pk-field-edge: var(--ecc-lime-edge, inset 0 0 0 1px rgba(74, 121, 0, .95));
  /* cursor */
  --pk-cursor: var(--ecc-lime, #A2EA0A);
  --pk-cursor-ring: var(--ecc-on-lime, #0B0D0C);      /* the ring keeps a lime square visible on light (C's paper spark) */
  --pk-cursor-trail: var(--ecc-spark, #4A7900);
  /* loader */
  --pk-loader-bg: var(--ecc-canvas, #E6E7E4);

  --pk-r: var(--ecc-r, 8px);
  --pk-r-sm: var(--ecc-r-sm, 6px);
  --pk-gap: var(--ecc-gap, 8px);
  --pk-f-text: var(--ecc-f-text, "Archivo", "Archivo Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif);
  --pk-f-mono: var(--ecc-f-mono, "Martian Mono", "Martian Mono Fallback", "Martian Mono Fallback Courier", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  --pk-f-dot: var(--ecc-f-dot, "Doto", "Doto Fallback", "Doto Fallback Courier", ui-monospace, monospace);
  --pk-ls-label: var(--ecc-ls-label, .04em);          /* the one tracking of mono labels */
  --pk-ease-out: var(--ecc-ease-out, cubic-bezier(.23, 1, .32, 1));
  --pk-ease-current: var(--ecc-ease-current, cubic-bezier(.65, 0, .35, 1));
}

/* ------------------------------------------------------------ tokens · Night */
:root[data-theme="night"] {
  color-scheme: dark;
  --pk-canvas: var(--ecc-canvas, #0A0C0B);            /* void */
  --pk-surface: var(--ecc-surface, #111412);          /* wall */
  --pk-surface-2: var(--ecc-surface-2, #181C1A);      /* plinth */
  --pk-surface-border: var(--ecc-surface-border, #2E3230);
  --pk-panel: var(--ecc-panel, #111412);
  --pk-panel-2: var(--ecc-panel-2, #181C1A);
  --pk-panel-border: var(--ecc-panel-border, #2E3230);
  --pk-ink: var(--ecc-ink, #EDEFEE);                  /* paper: 16.9:1 on void */
  --pk-ink-2: var(--ecc-ink-2, #C8C8C8);              /* chrome: 11.1:1 on wall */
  --pk-on-panel: var(--ecc-on-panel, #EDEFEE);
  --pk-on-panel-2: var(--ecc-on-panel-2, #A3A9A5);    /* mist: 7.7:1 on wall */
  --pk-line: var(--ecc-line, rgba(237, 239, 238, .10));
  --pk-line-strong: var(--ecc-line-strong, #2E3230);
  --pk-control-line: var(--ecc-control-line, #8F9692);
  --pk-spark: var(--ecc-spark, #A2EA0A);
  --pk-focus: var(--ecc-focus, #A2EA0A);
  --pk-btn-bg: var(--ecc-btn-bg, #A2EA0A);
  --pk-btn-fg: var(--ecc-btn-fg, #0A0C0B);
  --pk-btn-pip: var(--ecc-btn-pip, #0A0C0B);
  --pk-btn-hover: var(--ecc-btn-hover, #B9F53A);
  --pk-stage-day: var(--ecc-stage-day, 0);
  --pk-stage-night: var(--ecc-stage-night, 1);
  /* rim light so dark products read on dark (direction A's light-pool technique) */
  --pk-img-filter: var(--ecc-stage-img-filter, drop-shadow(0 0 .7px rgba(237, 239, 238, .55)) drop-shadow(0 -10px 26px rgba(234, 219, 196, .14)) brightness(1.08) contrast(1.04));
  --pk-field: var(--ecc-lime, #A2EA0A);
  --pk-field-edge: var(--ecc-lime-edge, 0 0 6px rgba(162, 234, 10, .55));
  --pk-cursor-ring: var(--ecc-on-lime, #0A0C0B);
  --pk-cursor-trail: var(--ecc-spark, #A2EA0A);
  --pk-loader-bg: var(--ecc-canvas, #0A0C0B);
}

html { background: var(--pk-canvas); color: var(--pk-ink); }

/* Theme switch (class added by PixelKit.theme for 360 ms): surfaces crossfade over 300 ms, while text
   flips in one step at the midpoint. Fading text and background together would cross at the same
   mid-grey and leave the page unreadable for a moment; the step keeps text legible all the way. */
html.pk-theme-anim,
html.pk-theme-anim *,
html.pk-theme-anim *::before,
html.pk-theme-anim *::after {
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease, fill .3s ease, stroke .3s ease,
    opacity .3s ease, filter .3s ease, color 0s linear .15s !important;
}
/* the switch thumb keeps its pixel steps while the theme changes */
html.pk-theme-anim .pk-theme-toggle__thumb {
  transition: transform .2s steps(4, end), background-color .3s ease, box-shadow .3s ease !important;
}

/* ================================================================ 1 · CURSOR */
/* The lime square is a real cursor image: the browser draws it, so it sits exactly on the pointer and a click lands
   where the square is (v1.1 moved an element after the mouse and reached it 100 to 133 ms late). PixelKit.cursor
   puts the class on <html> only for a mouse or a trackpad, never in forced colours or when more contrast is asked
   for. Every value is written twice: a plain url() first, for a browser that does not read image-set() in a cursor.
   Hot spot 6 6: the centre of the 8 px square inside the 12 px image (tools/build-cursor.mjs).
   The cursor inherits. The rules run from general to particular, and the order between them matters:
   1 the square everywhere · 2 text blocks: the native I-beam · 3 fields: native · 4 controls the browser gives an
   arrow of its own, pictures and layout boxes inside a text block: the square again · 5 what can be pressed: the
   square with a hand as its fallback · 6 native areas. No rule sets the cursor to none. */
html.pk-cursor-on {
  cursor: url("cursor/pk-cursor-1x.png") 6 6, auto;
  cursor: image-set(url("cursor/pk-cursor-1x.png") 1x, url("cursor/pk-cursor-2x.png") 2x) 6 6, auto;
}
/* 2 · Text people read and copy keeps the text cursor on the whole block, so it never alternates with the square
   between two lines. data-pk-cursor="text" marks any other box of text. */
html.pk-cursor-on :where(p, h1, h2, h3, h4, h5, h6, li, dt, dd, td, th, address, blockquote, figcaption, caption, pre, [data-pk-cursor="text"]) { cursor: text; }
/* 3 · Where people type or pick, the browser's own cursor */
html.pk-cursor-on :where(input, textarea, select, iframe, video, [contenteditable=""], [contenteditable="true"]) { cursor: auto; }
/* 4 · The square again: controls that are not for typing, and what is not text inside a text block (a picture, a
   layout box, a list item or a cell that holds a card). An author rule such as cursor: not-allowed still wins. */
html.pk-cursor-on :where(button, label, input:is([type="submit" i], [type="button" i], [type="reset" i], [type="checkbox" i], [type="radio" i], [type="range" i], [type="color" i], [type="file" i], [type="image" i])),
html.pk-cursor-on :where(p, h1, h2, h3, h4, h5, h6, li, dt, dd, td, th, address, blockquote, figcaption, caption, pre) :where(img, picture, svg, canvas, figure, div, article, section, aside, form),
html.pk-cursor-on :is(li, dd, td, th):where(:has(> :is(div, article, section, figure, picture, img, form))) {
  cursor: url("cursor/pk-cursor-1x.png") 6 6, auto;
  cursor: image-set(url("cursor/pk-cursor-1x.png") 1x, url("cursor/pk-cursor-2x.png") 2x) 6 6, auto;
}
/* 5 · What can be pressed (the same list as SNAP in pixel-kit.js): the square stays, the four corner pixels say
   "this one". If the image is missing the browser shows its hand. Text and pictures inside a target follow it. */
html.pk-cursor-on :is(a[href], button:not(:disabled), [role="button"], [role="link"], [role="tab"], [role="switch"], input:is([type="submit" i], [type="button" i], [type="reset" i]):not(:disabled), input:is([type="checkbox" i], [type="radio" i]), label[for], summary, [data-pk-cursor="snap"]) {
  cursor: url("cursor/pk-cursor-1x.png") 6 6, pointer;
  cursor: image-set(url("cursor/pk-cursor-1x.png") 1x, url("cursor/pk-cursor-2x.png") 2x) 6 6, pointer;
}
html.pk-cursor-on :is(a[href], button, label[for], summary, [role="button"], [role="link"], [role="tab"], [role="switch"], [data-pk-cursor="snap"]) :where(p, h1, h2, h3, h4, h5, h6, li, dt, dd, td, th, address, blockquote, figcaption, caption, pre, img, picture, svg, canvas, figure, div, article, section, aside, form) { cursor: inherit; }
/* 6 · data-pk-cursor="native": everything inside is left to the browser */
html.pk-cursor-on [data-pk-cursor="native"],
html.pk-cursor-on [data-pk-cursor="native"] * { cursor: auto !important; }

/* The decoration PixelKit.cursor draws around the real cursor: corner pixels, click burst, voxel trail. */
.pk-cursor {
  position: fixed; left: 0; top: 0; width: 0; height: 0;
  z-index: 2147483500; pointer-events: none;
  transition: opacity .12s linear;
}
.pk-cursor[data-mode="hidden"],
.pk-cursor[data-mode="text"] { opacity: 0; }
.pk-cursor i { position: absolute; left: 0; top: 0; display: block; pointer-events: none; will-change: transform; }
.pk-cursor__corner {
  width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
  background: var(--pk-cursor); box-shadow: 0 0 0 1.5px var(--pk-cursor-ring);
  opacity: 0; transition: opacity .14s linear;
}
/* the trail shows only while the pointer moves: at rest nothing is drawn at the pointer but the cursor itself */
.pk-cursor__trail { background: var(--pk-cursor-trail); opacity: 0; transition: opacity .16s linear; }
.pk-cursor__trail:nth-child(1) { width: 6px; height: 6px; margin: -3px 0 0 -3px; }
.pk-cursor__trail:nth-child(2) { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; }
.pk-cursor__trail:nth-child(3) { width: 4px; height: 4px; margin: -2px 0 0 -2px; }
.pk-cursor[data-trail] .pk-cursor__trail { transition-duration: 0s; }
.pk-cursor[data-trail] .pk-cursor__trail:nth-child(1) { opacity: .5; }
.pk-cursor[data-trail] .pk-cursor__trail:nth-child(2) { opacity: .34; }
.pk-cursor[data-trail] .pk-cursor__trail:nth-child(3) { opacity: .2; }
.pk-cursor[data-mode="snap"] .pk-cursor__corner { opacity: 1; }
.pk-cursor[data-mode="snap"] .pk-cursor__trail:nth-child(n) { opacity: 0; }
.pk-cursor .pk-cursor__burst { width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; background: var(--pk-cursor-trail); opacity: 0; will-change: auto; }

/* =========================================================== 2 · LOADING SCREEN */
.pk-loader {
  position: fixed; inset: 0; z-index: 2147483600;
  pointer-events: auto; contain: strict;
}
.pk-loader__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pk-loader__mark { position: absolute; left: 50%; top: 50%; display: block; max-width: none; height: auto; opacity: 0; }
.pk-loader.is-rm { background: var(--pk-loader-bg); }
.pk-loader.is-rm .pk-loader__mark { opacity: 1; }
.pk-loader.is-out { opacity: 0; transition: opacity .18s linear; } /* reduced motion: about 200 ms on screen in total */

/* ============================================================== 3 · VOXEL STAGE */
.pk-stage { position: relative; overflow: hidden; border-radius: var(--pk-r-sm); isolation: isolate; }
/* Day look: one soft studio light from above (direction B) */
.pk-stage::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: var(--pk-stage-studio);
  opacity: var(--pk-stage-day);
}
/* Night look: a dark plinth with a pool of warm case light (direction A) */
.pk-stage::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--pk-stage-pool);
  opacity: var(--pk-stage-night);
}
.pk-stage__box { position: absolute; left: 11%; right: 11%; top: 16%; bottom: 17%; z-index: 1; }
.pk-stage__img {
  display: block; width: 100%; height: 100%; max-width: none;
  object-fit: contain; object-position: 50% 100%;
  filter: var(--pk-img-filter);
  transition: opacity .28s var(--pk-ease-out);
}
/* floor: soft shadow by day, a light pool + hairline by night */
.pk-stage__floor {
  position: absolute; left: 20%; right: 20%; bottom: calc(17% - 13px); height: 26px; z-index: 0; pointer-events: none;
  background: var(--pk-stage-floor-shadow);
  opacity: var(--pk-stage-day);
}
.pk-stage__pool {
  position: absolute; left: 8%; right: 8%; bottom: calc(17% - 28px); height: 56px; z-index: 0; pointer-events: none;
  background: var(--pk-stage-floor-pool);
  opacity: var(--pk-stage-night);
}
.pk-stage__pool::before {
  content: ""; position: absolute; left: -10%; right: -10%; top: 50%; height: 1px;
  background: var(--pk-stage-hairline);
}
/* the lime current: runs once each time a product lands (no idle loop) */
.pk-stage__current {
  position: absolute; left: 32%; right: 32%; bottom: 17%; height: 1px; z-index: 2; pointer-events: none;
  background: var(--pk-stage-current);
  box-shadow: var(--pk-stage-current-glow);
  transform: scaleX(.2); transform-origin: 50% 50%;
  opacity: 0;
  transition: transform .5s var(--pk-ease-current), opacity .3s linear;
}
.pk-stage.is-lit .pk-stage__current { transform: none; opacity: var(--pk-stage-night); }
/* the radiance pulse: one 450 ms shot when a product has landed (PixelKit animates opacity + transform).
   A soft lime glow rises behind the product and the floor line flares, then both settle to the resting light. */
.pk-stage__radiance {
  position: absolute; left: 6%; right: 6%; top: 18%; bottom: calc(17% - 30px); z-index: 0;
  pointer-events: none; opacity: 0; transform-origin: 50% 100%;
  background: radial-gradient(ellipse 52% 50% at 50% 80%, rgba(162, 234, 10, .36), rgba(162, 234, 10, .13) 46%, rgba(162, 234, 10, 0) 74%);
}
.pk-stage__spark {
  position: absolute; left: 22%; right: 22%; bottom: calc(17% - 1px); height: 2px; z-index: 2;
  pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(162, 234, 10, 0), var(--pk-spark) 24%, var(--pk-lime) 50%, var(--pk-spark) 76%, rgba(162, 234, 10, 0));
  box-shadow: 0 0 16px 2px rgba(162, 234, 10, .6);
}
.pk-stage__vox {
  position: absolute; inset: 0; z-index: 2; display: block; width: 100%; height: 100%;
  pointer-events: none; opacity: 0;
  transition: opacity .28s var(--pk-ease-out);
}
.pk-stage.is-vox .pk-stage__vox { opacity: 1; transition-duration: .12s; }
.pk-stage.is-vox .pk-stage__img { opacity: 0; transition-duration: .16s; }
.pk-stage.is-fading .pk-stage__img { opacity: 0; transition-duration: .18s; }
/* Entrance: an image waiting for its voxel entrance is hidden only when it starts below the fold
   (is-pending, set by JS) or when the page opts in with data-pk-enter="always".
   Failsafe for "always": if the script never arms the stage, the image shows after 3 s. */
.pk-stage.is-pending .pk-stage__img,
html.pk-js .pk-stage[data-pk-enter="always"]:not(.is-ready) .pk-stage__img { opacity: 0; }
html.pk-js .pk-stage[data-pk-enter="always"]:not(.is-ready):not([data-pk-armed]) .pk-stage__img { animation: pk-failsafe 0s 3s forwards; }
@keyframes pk-failsafe { to { opacity: 1; } }

/* ============================================================= 4 · PRODUCT TILE */
.pk-tile {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--pk-surface); color: var(--pk-ink);
  border-radius: var(--pk-r); box-shadow: inset 0 0 0 1px var(--pk-surface-border);
}
.pk-tile .pk-stage { margin: 8px 8px 0; height: clamp(280px, 26vw, 360px); }
.pk-tile__label {
  position: absolute; left: 16px; top: 14px; z-index: 3; margin: 0;
  display: flex; align-items: center; gap: 8px;
  font: 500 12px/1.4 var(--pk-f-mono); font-stretch: 87.5%; letter-spacing: var(--pk-ls-label); text-transform: uppercase;
  color: var(--pk-ink-2);
}
.pk-pip { width: 8px; height: 8px; border-radius: 2px; background: var(--pk-spark); display: inline-block; flex: none; }
.pk-tile__num {
  position: absolute; right: 14px; top: 10px; z-index: 3;
  font-family: var(--pk-f-dot); font-weight: 900;
  font-size: 24px; line-height: 1; letter-spacing: .04em; color: var(--pk-ink); /* the stage is light by day: Doto is 24px there, in weight 900 */
}
.pk-tile__body { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 12px; flex: 1; }
/* The name box is two lines tall whatever the name: a short name leaves room, a long one is cut after two lines with
   an ellipsis (the full name stays in the DOM for screen readers). So a tile never changes height when its product
   changes, and nothing below it moves. The clamp is on the inner span: the link's focus ring is not clipped. */
.pk-tile__name {
  margin: 0; min-height: 2.4em;
  font: 620 20px/1.2 var(--pk-f-text); font-stretch: 104%; letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
.pk-tile__name a { display: inline-flex; align-items: center; max-width: 100%; min-height: 44px; color: inherit; text-decoration: none; }
.pk-tile__name [data-pk-name] { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.pk-tile__name a:hover { text-decoration: underline; text-decoration-color: var(--pk-spark); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.pk-tile__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; flex-wrap: wrap; }
.pk-linkline {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font: 500 13px/1.4 var(--pk-f-mono); font-stretch: 87.5%; letter-spacing: var(--pk-ls-label); text-transform: uppercase;
  color: var(--pk-ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px;
}
.pk-linkline:hover { text-decoration-color: var(--pk-spark); text-decoration-thickness: 2px; }
.pk-tile__dots { display: flex; align-items: center; margin-right: -10px; }
.pk-dot {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; padding: 0; background: transparent; border-radius: 4px; cursor: pointer; color: inherit;
}
.pk-dot::before {
  content: ""; width: 9px; height: 9px; border-radius: 1px;
  box-shadow: inset 0 0 0 1.5px var(--pk-control-line);
  transition: background-color .2s linear, box-shadow .2s linear;
}
.pk-dot[aria-current="true"]::before { background: var(--pk-ink); box-shadow: none; }
:root[data-theme="night"] .pk-dot[aria-current="true"]::before { background: var(--pk-lime); box-shadow: 0 0 8px rgba(162, 234, 10, .5); }
@media (hover: hover) and (pointer: fine) {
  .pk-dot:hover::before { box-shadow: inset 0 0 0 1.5px var(--pk-ink); }
}

/* ========================================================== 5 · LIME LIGHT FIELD */
/* sits in the empty floor zone under the product, at the right end of the floor line, behind the photo */
.pk-field {
  position: absolute; right: 9%; bottom: calc(17% - 38px); z-index: 0;
  width: 43px; height: 31px; pointer-events: none;
}
.pk-field i {
  position: absolute; display: block;
  opacity: 0; transform: scale(.6);
  transition: opacity .3s linear, transform .3s steps(2, end);
  transition-delay: calc(var(--i) * 45ms);
}
.pk-field i::before {
  content: ""; position: absolute; inset: 0;
  background: var(--pk-field); box-shadow: var(--pk-field-edge);
}
.pk-field.is-on i { opacity: var(--o); transform: none; }
/* two calm breaths after each assembly, then rest: an accent, never an idle loop */
.pk-field.is-on i::before { animation: pk-breathe 2.8s var(--d) 2 ease-in-out; }
@keyframes pk-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
/* The site's motion switch (<html data-ecc-motion="paused">, PixelKit.motion): the kit's own CSS animation holds.
   It is the only one that runs longer than a moment; the kit has no endless one. */
html[data-ecc-motion="paused"] .pk-field i::before { animation-play-state: paused; }

/* ============================================================ 6 · DAY / NIGHT */
.pk-theme-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; min-width: 44px; padding: 0 12px;
  border: 0; border-radius: var(--pk-r-sm); background: transparent; color: inherit;
  font: 500 12px/1.2 var(--pk-f-mono); font-stretch: 87.5%; letter-spacing: var(--pk-ls-label); text-transform: uppercase;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .pk-theme-toggle:hover { background: var(--pk-line); }
}
.pk-theme-toggle__track {
  position: relative; flex: none; width: 34px; height: 18px; border-radius: 3px;
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.pk-theme-toggle__thumb {
  position: absolute; left: 3px; top: 3px; width: 5px; height: 5px;
  background: currentColor;
  box-shadow: 7px 0 0 currentColor, 0 7px 0 currentColor, 7px 7px 0 currentColor;
  transition: transform .2s steps(4, end);
}
.pk-theme-toggle[aria-pressed="true"] .pk-theme-toggle__thumb {
  transform: translateX(16px);
  background: var(--pk-lime);
  box-shadow: 7px 0 0 var(--pk-lime), 0 7px 0 var(--pk-lime), 7px 7px 0 var(--pk-lime);
}

/* ================================================================ shared bits */
.pk-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  .pk-field i, .pk-field i::before, .pk-stage__current, .pk-theme-toggle__thumb, .pk-dot::before { transition: none !important; animation: none !important; }
  .pk-stage__img, .pk-stage__vox { transition-duration: .2s; }
}
/* Forced colours (Windows High Contrast) drop every box-shadow, and box-shadow is what draws the switch and the
   dots of a tile. The track gets a real 2 px edge; the four voxels of the thumb are kept and painted in system
   colours, Highlight when the switch is on; a dot gets an edge, the current one is filled with Highlight.
   (The cursor's corner pixels and trail are off in this mode: PixelKit.cursor leaves the system cursor alone.) */
@media (forced-colors: active) {
  .pk-theme-toggle__track { box-sizing: border-box; border: 2px solid CanvasText; }
  .pk-theme-toggle__thumb { forced-color-adjust: none; left: 1px; top: 1px; color: CanvasText; }
  .pk-theme-toggle[aria-pressed="true"] .pk-theme-toggle__thumb { background: Highlight; box-shadow: 7px 0 0 Highlight, 0 7px 0 Highlight, 7px 7px 0 Highlight; }
  .pk-dot::before { box-sizing: border-box; border: 2px solid CanvasText; }
  .pk-dot[aria-current="true"]::before,
  :root[data-theme="night"] .pk-dot[aria-current="true"]::before { border-color: Highlight; background: Highlight; }
}
@media print {
  .pk-cursor, .pk-loader, .pk-stage__vox, .pk-field, .pk-stage__radiance, .pk-stage__spark { display: none !important; }
  .pk-stage__img { opacity: 1 !important; }
}