/* generated: packages/tokens/src/remake.ts gateCssFor('lak') */
body {
  background: #a9dcf5;
  color: #0b0d0f;
}
.gate-wrap { background: #a9dcf5; }
/* NO CARD AT ALL.
   First the hairline came off, and Dan still saw it: "they all have that werid
   box still with a diff color ... holding the text and the logos". He is
   describing the panel itself. A card is a device for separating content from
   a BUSY ground; this ground is one flat colour, so the panel was separating
   the content from nothing and announcing itself while doing it.
   The mark, the field and the button sit on the page. Nothing holds them. */
.lock-card {
  background: none;
  border: 0;
  box-shadow: none;
}
/* THE MARK, UNSQUASHED. The shop's own gate sheet gives this a 440px width
   with max-width 100% and leaves the height at whatever 440px implied, so on
   any screen narrower than the card the width shrinks, the height does not,
   and object-fit fill stretches the logo into a vertical smear. It is a
   phone-only bug, which is to say it is the bug almost every customer sees.
   NO BACKTICKS IN THIS COMMENT: it lives inside a template literal, and a
   backtick here ends the string. That has now cost three builds. */
/* THE MARK IS CAPPED BY HEIGHT, NOT WIDTH.
   The shop's gate sizes this with width: clamp(240px, 60vw, 440px) and lets
   the height fall where it may. That is fine for a landscape mark and absurd
   for a portrait one: Duck Distro's logo is 378x760, so it rendered 760px tall
   and ate 80% of the viewport -- "duk is weird like mad huge" -- while every
   other shop sat between 14% and 25%. Sizing a mark by its width assumes every
   mark is the same shape. Capping BOTH axes lands all five in one band
   whatever their aspect. */
.gate-logo {
  width: auto;
  height: auto;
  max-width: min(320px, 68vw);
  max-height: min(230px, 26vh);
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.5));
}
.lock-label { color: color-mix(in oklab, #0b0d0f 80%, transparent); }
/* The field keeps an edge -- without one there is nothing to aim at -- but it
   is the field's own fill stepped away from the card, not a hairline. */
.lock-input {
  background: rgb(0 0 0 / 0.06);
  border: 0;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, #0b0d0f 18%, transparent);
  border-radius: 12px;
  color: #0b0d0f;
}
.lock-input:focus {
  outline: none;
  box-shadow:
    inset 0 0 0 1px #ea2789,
    0 0 0 3px color-mix(in oklab, #ea2789 26%, transparent);
}
/* The button is the site's primary button, to the letter: the ramp its ink was
   solved against, so the gate cannot be the one surface that fails contrast. */
/* LIQUID MERCURY, IN THE SHOP'S COLOUR.
   Dan asked for Captain Slabbin's red to read as flowing metal rather than as
   a painted rectangle. What makes mercury look like mercury is that the
   highlight MOVES and the body does not -- a still gradient reads as plastic
   no matter how many stops it has.

   So: the body is flat accent, which is what keeps the lettering legible and
   the contrast figure honest. The motion lives entirely in an overlay that
   carries no text -- a narrow bright band travelling across a wider dark one,
   slowly, on a loop long enough not to nag. This is the ONE button in the
   estate that gets a moving fill; Dan asked for it here by name, and the
   site's own buttons stay flat for the reason recorded in skin.css. */
.lock-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, color-mix(in oklab, #ea2789 88%, white) 0%, #ea2789 55%, color-mix(in oklab, #ea2789 88%, black) 100%);
  color: #0b0d0f;
  border: 0;
  border-radius: 12px;
  font-weight: 700;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.4),
    0 8px 26px rgb(0 0 0 / 0.45),
    0 0 0 0 color-mix(in oklab, #ea2789 55%, transparent);
  transition: box-shadow 0.28s ease, transform 0.16s ease;
}
/* THE HIGHLIGHT IS A BACKGROUND LAYER, NOT AN OVERLAY.
   It was an ::after at z-index -1 inside a button with isolation: isolate --
   which paints it BEHIND the button's own background, so on a flat fill the
   mercury was mostly swallowed and read as a dull smear rather than a moving
   reflection. Making it a background layer puts it above the fill and below
   the lettering with no stacking games at all, and background-position is
   cheaper to animate than a transform on a huge inset box. */
.lock-btn {
  background-image:
    linear-gradient(
      115deg,
      transparent 34%,
      rgb(255 255 255 / 0.12) 44%,
      rgb(255 255 255 / 0.5) 50%,
      rgb(255 255 255 / 0.12) 56%,
      transparent 66%
    ),
    linear-gradient(180deg, color-mix(in oklab, #ea2789 88%, white) 0%, #ea2789 55%, color-mix(in oklab, #ea2789 88%, black) 100%);
  background-size: 260% 100%, 100% 100%;
  background-position: 160% 0, 0 0;
  background-repeat: no-repeat;
  animation: lk-mercury 4.6s cubic-bezier(0.6, 0, 0.4, 1) infinite;
}
@keyframes lk-mercury {
  0%   { background-position: 160% 0, 0 0; }
  60%  { background-position: -60% 0, 0 0; }
  100% { background-position: -60% 0, 0 0; }
}
.lock-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.5),
    0 10px 30px rgb(0 0 0 / 0.5),
    0 0 0 4px color-mix(in oklab, #ea2789 34%, transparent);
}
.lock-btn:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .lock-btn { animation: none; }
}
/* The field's focus ring belongs to the same colour as the button it sits above. */
.lock-input:focus { box-shadow: inset 0 0 0 1px #ea2789, 0 0 0 3px color-mix(in oklab, #ea2789 26%, transparent); }
.lock-error { color: #ea2789; }
.lock-note { color: color-mix(in oklab, #0b0d0f 60%, transparent); }