/*
 * The Theme Kit in Arcade's look. The kit (themes/_shared/assets/css/kit.css) draws every block the theme has no
 * template for, and every module section; this file sets its tokens and the look of its parts, linked after kit.css, so
 * the values here win. The frame (header, footer, the theme's own blocks) and the dithered edges of coloured bands are in
 * theme.css.
 *
 * The look: pixel art from early home computers and arcade cabinets. Cards, buttons and frames are cut with stepped pixel
 * corners (clip-path) and outlined in a chunky line of whole pixels; a card row casts a hard pixel shadow. Buttons are
 * solid keys with a darker edge and a shaded foot that press in. Headings, labels, buttons and figures are set in the
 * heading face (a pixel face in most font palettes); running text stays in the body face. The accent colour fills the main
 * buttons and marks small things: an arrow before a label, a step's badge, a statistic's sign.
 *
 * Rules for this file: it loads nothing, no picture, font or address of any kind (the kit inlines it into module
 * previews; kit_components.test.php fails for one, and also for these words written in a comment);
 * colours only through the palette tokens the kit already reads (--text-primary, --surface, --primary, ...) or
 * color-mix() of them; weights only through the layout's --arcade-heading-weight and --arcade-body-strong. Shapes are
 * drawn with clip-path polygons and gradients, never with a mask picture.
 *
 * --kit-radius and --kit-button-radius are repeated in this theme's line of the shared button table
 * (themes/_shared/assets/css/resilience.css, --chrome-radius and --chrome-button-radius, with the same stepped corners as
 * --chrome-button-clip) so the cookie notice and the phone action bar match the theme's own cards and buttons:
 * theme-chrome.test.mjs compares the two. Change both.
 *
 * Sizes of the heading face are multiplied by --arcade-scale (theme.css sets it per face: a narrow pixel face is set
 * larger, a wide monospaced one smaller), so every font palette fits the same words in the same room.
 */

.kit-root {
  --kit-radius: 0px;
  --kit-radius-sm: 0px;
  --kit-button-radius: 0px;
  --kit-input-radius: 0px;
  --kit-media-radius: 0px;
  --kit-chip-radius: 0px;
  --kit-heading-weight: var(--arcade-heading-weight, 700);
  --kit-heading-tracking: 0;
  --kit-button-weight: var(--arcade-heading-weight, 700);
  --kit-button-transform: none;
  --kit-button-tracking: 0.02em;
  --kit-eyebrow-tracking: 0.04em;
  --kit-focus: var(--accent-ink, #b8193f);
  --kit-star: var(--accent-ink, #b8193f);
  --kit-shadow: none;
  --kit-shadow-hover: none;
  /* The main button is the accent key (the accent colour with its own readable ink, a pair the colour contract keeps in
     every palette). A dark or accent band sets these again for itself (kit.css), and its buttons follow the band. */
  --kit-primary: var(--accent, #ff5577);
  --kit-primary-hover: var(--accent, #ff5577);
  --kit-on-primary: var(--on-accent, #22183f);
  --kit-card-pad: clamp(1.25rem, 1rem + 1vw, 1.6rem);
  --kit-gap-medium: clamp(1.25rem, 2vw, 1.75rem);
  --kit-gap-large: clamp(2rem, 1.5rem + 2vw, 3rem);
  --kit-gutter: clamp(1rem, 4vw, 2rem);
  --kit-width-normal: 72rem;
  --kit-width-narrow: 46rem;
  --kit-pad-normal: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  --kit-pad-compact: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  --kit-pad-spacious: clamp(4.5rem, 3rem + 6vw, 8rem);
  --kit-speed: 120ms;
  /* One pixel of the theme's art, and the shapes built from it. Repeated here (and not only in theme.css) because module
     previews link this file without theme.css. */
  --arcade-px: 3px;
  --arcade-step: polygon(0 calc(2 * var(--arcade-px)), var(--arcade-px) calc(2 * var(--arcade-px)), var(--arcade-px) var(--arcade-px), calc(2 * var(--arcade-px)) var(--arcade-px), calc(2 * var(--arcade-px)) 0,
    calc(100% - 2 * var(--arcade-px)) 0, calc(100% - 2 * var(--arcade-px)) var(--arcade-px), calc(100% - var(--arcade-px)) var(--arcade-px), calc(100% - var(--arcade-px)) calc(2 * var(--arcade-px)), 100% calc(2 * var(--arcade-px)),
    100% calc(100% - 2 * var(--arcade-px)), calc(100% - var(--arcade-px)) calc(100% - 2 * var(--arcade-px)), calc(100% - var(--arcade-px)) calc(100% - var(--arcade-px)), calc(100% - 2 * var(--arcade-px)) calc(100% - var(--arcade-px)), calc(100% - 2 * var(--arcade-px)) 100%,
    calc(2 * var(--arcade-px)) 100%, calc(2 * var(--arcade-px)) calc(100% - var(--arcade-px)), var(--arcade-px) calc(100% - var(--arcade-px)), var(--arcade-px) calc(100% - 2 * var(--arcade-px)), 0 calc(100% - 2 * var(--arcade-px)));
  --arcade-arrow: polygon(0 0, 33.34% 0, 33.34% 20%, 66.67% 20%, 66.67% 40%, 100% 40%, 100% 60%, 66.67% 60%, 66.67% 80%, 33.34% 80%, 33.34% 100%, 0 100%);
}

/* The outline of a stepped box: a ring of one pixel and, at each corner, the one pixel that joins the ring's two sides
   across the step. It is drawn in currentColor on a layer over the box (::before, whose colour is the ring's), so a
   picture at a card's edge stays inside it and a key's label keeps its own colour. */
.kit-root {
  --arcade-ring-corners:
    linear-gradient(currentColor, currentColor) left var(--arcade-px) top var(--arcade-px) / var(--arcade-px) var(--arcade-px) no-repeat,
    linear-gradient(currentColor, currentColor) right var(--arcade-px) top var(--arcade-px) / var(--arcade-px) var(--arcade-px) no-repeat,
    linear-gradient(currentColor, currentColor) left var(--arcade-px) bottom var(--arcade-px) / var(--arcade-px) var(--arcade-px) no-repeat,
    linear-gradient(currentColor, currentColor) right var(--arcade-px) bottom var(--arcade-px) / var(--arcade-px) var(--arcade-px) no-repeat;
}

/* ------------------------------------------------------------------ Type */

/* Headings in the heading face. Sizes are set for ordinary words at 320 px in the widest face of the font palettes
   ("Apgyvendinimas" in Tiny5 is 6.9 times its size; --arcade-scale evens the others out); the shared script is only the
   net for a longer word (cms/THEME_DEVELOPMENT.md, rule 1). A pixel face's marks (the caron of Š, the dot of Ė) stand
   high above its capitals, so lines are never set under 1.15. */
.kit-heading {
  font-family: var(--font-heading, sans-serif);
  line-height: 1.18;
  text-wrap: balance;
}

.kit-heading--1 {
  font-size: calc(clamp(2.125rem, 1.35rem + 3.2vw, 4rem) * var(--arcade-scale, 1));
  line-height: 1.15;
}

.kit-heading--2 {
  font-size: calc(clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem) * var(--arcade-scale, 1));
}

.kit-heading--3 {
  font-size: calc(clamp(1.2rem, 1.1rem + 0.45vw, 1.45rem) * var(--arcade-scale, 1));
  line-height: 1.25;
}

.kit-heading--4 {
  font-size: calc(1.125rem * var(--arcade-scale, 1));
  line-height: 1.3;
}

.kit-heading.kit-heading--long {
  font-size: calc(clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem) * var(--arcade-scale, 1));
  line-height: 1.3;
}

/* The page's one main heading ends in a blinking cursor, the way an old computer waits for its next line. It is written
   by the stylesheet, so it is never in the page's text, and screen readers skip it (the empty alternative after the
   slash). It joins the last word, so it never stands on a line by itself. With less motion it stays lit. */
.kit-heading--1::after {
  content: "_" / "";
  margin-inline-start: 0.06em;
  color: var(--kit-accent-text);
  animation: arcade-cursor 1.1s steps(1, end) infinite;
}

:is(.kit-section--inverse, .kit-section--accent, .kit-section--image, .kit-slide) .kit-heading--1::after {
  color: inherit;
}

@keyframes arcade-cursor {
  50% { opacity: 0; }
}

.kit-text--lead {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.6;
}

/* Small labels: the heading face, after a pixel arrow like the pointer of a game's menu. Not in capitals: capitals make
   long Lithuanian words much wider. */
.kit-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--kit-accent-text);
  font-family: var(--font-heading, sans-serif);
  font-size: calc(0.9375rem * var(--arcade-scale, 1));
  font-weight: var(--arcade-heading-weight, 700);
  line-height: 1.3;
  text-transform: none;
}

.kit-eyebrow::before {
  content: "";
  flex: none;
  width: calc(3 * var(--arcade-px));
  height: calc(5 * var(--arcade-px));
  background: currentColor;
  clip-path: var(--arcade-arrow);
}

.kit-card__eyebrow {
  font-family: var(--font-heading, sans-serif);
  font-size: calc(0.875rem * var(--arcade-scale, 1));
  font-weight: var(--arcade-heading-weight, 700);
  letter-spacing: 0.04em;
  text-transform: none;
}

/* A section's heading is underlined by a short row of pixels, like a level's title on its loading screen. */
.kit-section__inner > .kit-stack > .kit-heading-group:has(> .kit-heading--2)::after {
  content: "";
  display: block;
  width: calc(14 * var(--arcade-px));
  height: calc(2 * var(--arcade-px));
  margin-top: 0.85rem;
  background: repeating-linear-gradient(90deg, var(--kit-accent-text) 0 calc(2 * var(--arcade-px)), transparent 0 calc(3 * var(--arcade-px)));
}

.kit-section__inner > .kit-stack > .kit-heading-group.kit-text--center:has(> .kit-heading--2)::after {
  margin-inline: auto;
}

.kit-link,
.kit-rich-text a {
  color: var(--kit-accent-text);
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}

.kit-link:hover,
.kit-rich-text a:hover {
  text-decoration-style: solid;
}

/* ------------------------------------------------------------------ Buttons */

/* A key: the fill with its own readable ink, stepped corners, an outline in a darker shade of the fill (the layer
   ::before, in its own colour) and a shaded foot. It rises a little under the pointer and presses in when clicked. The
   label is in the heading face and may take two lines; it never runs out of the key. Focus is a dashed line inside the
   key, in the label's colour: the stepped corners would cut a line drawn outside. */
.kit-button {
  position: relative;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0.65rem 1.4rem calc(0.65rem + var(--arcade-px));
  border: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(0.9375rem * var(--arcade-scale, 1));
  line-height: 1.2;
  clip-path: var(--arcade-step);
  transition: transform var(--kit-speed) ease, background-color var(--kit-speed) ease;
}

.kit-button:is(.kit-button--primary, .kit-button--secondary, .kit-button--light)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--arcade-ring-corners);
  box-shadow: inset 0 0 0 var(--arcade-px) currentColor;
  pointer-events: none;
}

.kit-button:is(.kit-button--primary, .kit-button--light) {
  box-shadow: inset 0 calc(-3 * var(--arcade-px)) 0 0 color-mix(in srgb, #000 22%, transparent), inset 0 calc(2 * var(--arcade-px)) 0 0 color-mix(in srgb, #fff 22%, transparent);
}

.kit-button--primary {
  background: var(--kit-primary);
  color: var(--kit-on-primary);
}

.kit-button--primary::before {
  color: color-mix(in srgb, var(--kit-primary) 50%, #000);
}

.kit-button--primary:hover {
  background: var(--kit-primary);
}

.kit-button--light::before {
  color: color-mix(in srgb, var(--surface, #fffaf0) 45%, #000);
}

/* The framed key: the outline in the text colour, nothing filled, a faint fill under the pointer. */
.kit-button--secondary {
  background: transparent;
  color: var(--kit-text);
}

.kit-button--secondary::before {
  color: var(--kit-text);
}

.kit-button--secondary:hover {
  background: color-mix(in srgb, var(--kit-text) 10%, transparent);
  color: var(--kit-text);
}

.kit-button--ghost {
  clip-path: none;
  color: var(--kit-accent-text);
  text-decoration: underline dotted 2px;
  text-underline-offset: 0.3em;
}

.kit-button:is(.kit-button--primary, .kit-button--secondary, .kit-button--light):hover {
  transform: translateY(-2px);
}

.kit-button:is(.kit-button--primary, .kit-button--light):active {
  transform: translateY(var(--arcade-px));
  box-shadow: inset 0 calc(3 * var(--arcade-px)) 0 0 color-mix(in srgb, #000 22%, transparent);
}

.kit-button:focus-visible {
  outline: 2px dashed currentColor;
  outline-offset: calc(-2px - 2 * var(--arcade-px));
}

/* A small key (a row of review links, Next under a list of posts) is still 40 px tall: what a thumb needs on a phone
   (verify-theme-stress.mjs, button-small). */
.kit-button--small {
  min-height: 2.5rem;
  padding: 0.4rem 1rem calc(0.4rem + var(--arcade-px));
  font-size: calc(0.875rem * var(--arcade-scale, 1));
}

/* The keys' stepped corners stand a pixel inside their box, so a row of them needs a little more room between. */
.kit-button-group {
  gap: 0.85rem 1rem;
}

/* ------------------------------------------------------------------ Cards */

/* A card is a window of an old game: the surface, cut with stepped corners and outlined in the text colour. A row of
   cards casts one hard shadow, two pixels down and to the right (a filter on the row: a card's own shadow would be cut
   by its corners). */
.kit-card {
  border: 0;
  border-radius: 0;
}

.kit-card--surface,
.kit-card--outline {
  background: var(--kit-surface);
  box-shadow: none;
  clip-path: var(--arcade-step);
}

.kit-card--surface::before,
.kit-card--outline::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--arcade-ring-corners);
  box-shadow: inset 0 0 0 var(--arcade-px) currentColor;
  color: var(--kit-text);
  pointer-events: none;
}

.kit-card--linked:hover::before {
  color: var(--kit-accent-text);
}

.kit-card__content {
  padding: calc(var(--kit-card-pad) + var(--arcade-px));
}

.kit-card--plain .kit-card__content {
  padding-inline: 0;
}

.kit-grid:has(> :is(.kit-card--surface, .kit-card--outline)),
.kit-carousel__track:has(> :is(.kit-card--surface, .kit-card--outline)) {
  filter: drop-shadow(calc(2 * var(--arcade-px)) calc(2 * var(--arcade-px)) 0 color-mix(in srgb, var(--kit-text) 22%, transparent));
}

/* Room for the shadow at the end of a carousel's row. */
.kit-carousel__track:has(> :is(.kit-card--surface, .kit-card--outline)) {
  padding: 0 calc(2 * var(--arcade-px)) calc(2 * var(--arcade-px) + 0.5rem) 0;
}

.kit-card__title {
  font-family: var(--font-heading, sans-serif);
  font-size: calc(clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem) * var(--arcade-scale, 1));
  letter-spacing: 0;
  line-height: 1.25;
}

.kit-card--linked:hover .kit-card__media img {
  transform: none;
}

.kit-card--linked .kit-card__link:focus-visible::after {
  outline: 2px dashed var(--kit-focus);
  outline-offset: calc(-3px - 2 * var(--arcade-px));
}

/* Pictures in a card stand inside the outline. */
.kit-card:is(.kit-card--surface, .kit-card--outline) > .kit-card__media {
  margin: var(--arcade-px) var(--arcade-px) 0;
}

/* Features: each lead icon in a small stepped tile of the accent's tint, like an item in a game's inventory. A small icon
   in a link (an arrow after "Learn more") stays as it is. */
.kit-features > .kit-stack > .kit-icon:first-child,
.kit-card__body > .kit-icon:first-child {
  box-sizing: content-box;
  padding: 0.55rem;
  background: color-mix(in srgb, var(--kit-accent) 16%, transparent);
  color: var(--kit-accent-text);
  clip-path: var(--arcade-step);
}

/* The plan a price table recommends stands out: its outline is the accent's readable shade, and its small label is a
   stepped tag in the accent colour, like the item a game's shop points at. */
.kit-card:has(> .kit-card__content > .kit-card__eyebrow:first-child):has(.kit-stat):not(.kit-steps > .kit-card)::before {
  color: var(--kit-accent-text);
  box-shadow: inset 0 0 0 calc(2 * var(--arcade-px)) currentColor;
}

.kit-grid:not(.kit-steps) > .kit-card:has(.kit-stat) > .kit-card__content > .kit-card__eyebrow:first-child {
  align-self: flex-start;
  padding: 0.2rem 0.6rem;
  background: var(--accent, #ff5577);
  color: var(--on-accent, #22183f);
  clip-path: var(--arcade-step);
}

/* Steps: each step's number is a stepped badge in the accent colour, like the number of a level. A step with an icon
   keeps the kit's small label instead (kit.css), so there is one lead mark. */
.kit-steps .kit-card__eyebrow {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: fit-content;
  min-width: 2.75rem;
  min-height: 2.75rem;
  margin-bottom: 0.4rem;
  padding: 0.3rem 0.6rem calc(0.3rem + 2 * var(--arcade-px));
  background: var(--accent, #ff5577);
  box-shadow: inset 0 calc(-2 * var(--arcade-px)) 0 0 color-mix(in srgb, #000 22%, transparent);
  color: var(--on-accent, #22183f);
  font-size: calc(1.125rem * var(--arcade-scale, 1));
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
  clip-path: var(--arcade-step);
}

/* A step with an icon (the catalogue asks for one) leads with the icon in its tile; its number stays as a small label over
   the title (kit.css), here in the heading face like a level's number. The selector outweighs the kit's rule for it. */
.kit-root .kit-steps .kit-card__content:has(> .kit-card__body > .kit-icon:first-child) > .kit-card__eyebrow {
  font-family: var(--font-heading, sans-serif);
  font-size: calc(1rem * var(--arcade-scale, 1));
  font-weight: var(--arcade-heading-weight, 700);
  letter-spacing: 0.04em;
}

/* ------------------------------------------------------------------ Figures */

/* Statistics read like a score: the figure large in the heading face, its sign in the accent's readable shade, the label
   under a dotted line of pixels. From 1200 px five figures stand in a row of about 200 px each, so a figure stops at about
   44 px there ("1500 m²" on one line). */
.kit-stat {
  gap: 0.5rem;
}

.kit-stat__value {
  font-size: calc(clamp(2rem, 1.4rem + 1.6vw, 2.75rem) * var(--arcade-scale, 1));
  line-height: 1.15;
}

.kit-stat__label {
  padding-top: 0.55rem;
  background: repeating-linear-gradient(90deg, var(--kit-line-strong) 0 var(--arcade-px), transparent 0 calc(2 * var(--arcade-px))) top / 100% var(--arcade-px) no-repeat;
  font-size: 0.9375rem;
}

.kit-price__amount {
  font-family: var(--font-heading, sans-serif);
  font-size: calc(1.5rem * var(--arcade-scale, 1));
}

.kit-price--large .kit-price__amount {
  font-size: calc(clamp(2rem, 1.5rem + 1.8vw, 2.75rem) * var(--arcade-scale, 1));
}

/* Stars of whole pixels. */
.kit-rating__star {
  -webkit-mask: none;
  mask: none;
  clip-path: polygon(40% 0, 60% 0, 60% 20%, 80% 20%, 80% 40%, 100% 40%, 100% 60%, 80% 60%, 80% 100%, 60% 100%, 60% 80%, 40% 80%, 40% 100%, 20% 100%, 20% 60%, 0 60%, 0 40%, 20% 40%, 20% 20%, 40% 20%);
  width: 1.05rem;
  height: 1.05rem;
}

/* ------------------------------------------------------------------ Lists, questions, quotes */

/* A ticked list: each line after a pixel arrow in the accent's readable shade. */
.kit-list--check > .kit-list-item::before {
  width: calc(3 * var(--arcade-px));
  height: calc(5 * var(--arcade-px));
  margin-top: 0.45em;
  margin-inline: 0.15rem 0.1rem;
  background: var(--kit-accent-text);
  -webkit-mask: none;
  mask: none;
  clip-path: var(--arcade-arrow);
}

.kit-list-item__title {
  font-weight: var(--arcade-body-strong, 600);
}

/* A price list's leader is a row of square pixels. */
.kit-list--menu .kit-list-item__line:has(.kit-list-item__meta)::after {
  height: var(--arcade-px);
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--kit-muted) 70%, transparent) 0 var(--arcade-px), transparent 0 calc(2 * var(--arcade-px)));
}

.kit-list--menu .kit-list-item__meta {
  font-family: var(--font-heading, sans-serif);
  font-size: calc(1.0625rem * var(--arcade-scale, 1));
  font-weight: var(--arcade-heading-weight, 700);
}

/* Questions: each one a stepped box with an outline; a pixel arrow at its end turns down when it opens. */
.kit-accordion {
  display: grid;
  gap: 0.85rem;
  border: 0;
}

.kit-accordion__item {
  position: relative;
  border: 0;
  background: var(--kit-surface);
  clip-path: var(--arcade-step);
}

.kit-accordion__item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--arcade-ring-corners);
  box-shadow: inset 0 0 0 var(--arcade-px) currentColor;
  color: var(--kit-line-strong);
  pointer-events: none;
}

.kit-accordion__item[open]::before,
.kit-accordion__item:hover::before {
  color: var(--kit-text);
}

.kit-accordion__title {
  gap: 1rem;
  padding: 1.05rem 1.25rem;
  font-weight: var(--arcade-body-strong, 600);
  line-height: 1.4;
}

.kit-accordion__title:hover {
  color: var(--kit-text);
}

/* The kit's chevron gives way to the pixel arrow (::after). The selector outweighs the kit's rule that shows every icon. */
.kit-root .kit-accordion__title .kit-accordion__chevron {
  display: none;
}

.kit-accordion__title::after {
  content: "";
  flex: none;
  width: calc(3 * var(--arcade-px));
  height: calc(5 * var(--arcade-px));
  margin-inline-start: auto;
  background: var(--kit-accent-text);
  clip-path: var(--arcade-arrow);
  transition: transform var(--kit-speed) ease;
}

.kit-accordion__item[open] > .kit-accordion__title::after {
  transform: rotate(90deg);
}

.kit-accordion__body {
  padding: 0 1.25rem 1.25rem;
}

/* A quotation is upright, in the body face: the font palettes load no slanted letters, and a long quotation in a pixel
   face is hard to read. The name under it is in the heading face. */
.kit-quote {
  padding-inline-start: 0;
  border-inline-start: 0;
}

.kit-quote__text {
  font-family: var(--font-body, sans-serif);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.2rem);
  font-style: normal;
  line-height: 1.6;
}

.kit-quote__text::before {
  content: "\201C" / "";
  display: block;
  margin-bottom: 0.15rem;
  color: var(--kit-accent-text);
  font-family: var(--font-heading, sans-serif);
  font-size: calc(2.5rem * var(--arcade-scale, 1));
  font-weight: var(--arcade-heading-weight, 700);
  line-height: 0.9;
}

.kit-quote__author {
  font-family: var(--font-heading, sans-serif);
  font-size: calc(1rem * var(--arcade-scale, 1));
  font-weight: var(--arcade-heading-weight, 700);
}

.kit-quote__role {
  font-family: var(--font-body, sans-serif);
}

/* A portrait is a stepped square, not a circle. */
.kit-avatar {
  border-radius: 0;
  clip-path: var(--arcade-step);
}

.kit-chip {
  border-radius: 0;
  font-family: var(--font-heading, sans-serif);
  font-size: calc(0.8125rem * var(--arcade-scale, 1));
  font-weight: var(--arcade-heading-weight, 700);
  clip-path: var(--arcade-step);
  border: 0;
  padding: 0.2rem 0.7rem;
}

/* ------------------------------------------------------------------ Pictures and frames */

.kit-picture,
.kit-frame,
.kit-video,
.kit-compare__frame {
  clip-path: var(--arcade-step);
}

.kit-section--muted {
  background-color: var(--kit-surface-alt);
}

/* Before and after: square labels, and a square handle on the line. */
.kit-compare__label {
  border-radius: 0;
  font-family: var(--font-heading, sans-serif);
  font-weight: var(--arcade-heading-weight, 700);
}

.kit-compare.is-ready .kit-compare__knob {
  border-radius: 0;
}

/* The audio player is a window like a card. */
.kit-audio {
  position: relative;
  border: 0;
  clip-path: var(--arcade-step);
}

.kit-audio::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--arcade-ring-corners);
  box-shadow: inset 0 0 0 var(--arcade-px) currentColor;
  color: var(--kit-text);
  pointer-events: none;
}

/* ------------------------------------------------------------------ Forms */

/* A field is a sunken box with a solid line, like an old program's text box. The focus ring is the kit's line, outside the
   box (kit-defaults.test.mjs measures it). */
.kit-input {
  border: 2px solid color-mix(in srgb, var(--kit-text) 72%, transparent);
  box-shadow: inset var(--arcade-px) var(--arcade-px) 0 0 color-mix(in srgb, var(--kit-text) 9%, transparent);
}

.kit-input:hover {
  border-color: var(--kit-text);
}

.kit-input:focus {
  border-color: var(--kit-text);
}

.kit-input:focus-visible {
  outline: 2px solid var(--kit-focus);
  outline-offset: 2px;
  box-shadow: inset var(--arcade-px) var(--arcade-px) 0 0 color-mix(in srgb, var(--kit-text) 9%, transparent);
}

.kit-field__label {
  font-weight: var(--arcade-body-strong, 600);
}

/* ------------------------------------------------------------------ Carousels */

/* The arrows are small keys outlined in their own colour (the text colour). */
.kit-carousel__button {
  border: 0;
  border-radius: 0;
  background-image: var(--arcade-ring-corners);
  box-shadow: inset 0 0 0 var(--arcade-px) var(--kit-text);
  clip-path: var(--arcade-step);
}

.kit-carousel__button:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--kit-text) 10%, transparent);
}

.kit-carousel__button:focus-visible {
  outline: 2px dashed currentColor;
  outline-offset: calc(-2px - 2 * var(--arcade-px));
}

.kit-carousel__progress,
.kit-carousel__progress-bar {
  border-radius: 0;
}

/* A slideshow's arrows are small square keys, its dots square pixels. */
.kit-slideshow__button {
  border-radius: 0;
  clip-path: var(--arcade-step);
}

.kit-slideshow__dot::before {
  border-radius: 0;
}

.kit-carousel__progress {
  height: var(--arcade-px);
}

/* ------------------------------------------------------------------ Less motion */

@media (prefers-reduced-motion: reduce) {
  .kit-heading--1::after {
    animation: none;
  }

  .kit-button:is(.kit-button--primary, .kit-button--secondary, .kit-button--light):hover,
  .kit-button:active {
    transform: none;
  }
}