/* ============================================================
   ATW presents Interplanetary Criminal + Guests
   Testbed, Leeds - Friday 27 November 2026, 9pm-3am
   Presale signup. Client: Louder Entertainment.

   DIRECTION
   The client supplied the poster as separate layers rather than
   one flat JPEG, so the artwork is rebuilt live instead of being
   shown as a boxed poster: the black felt paper and the crazed
   pink net become the page's own full-bleed background, and the
   silver type lockup sits on it as a transparent PNG. The net
   vignettes the edges of the source canvas and leaves a clear
   field in the middle, which is exactly the shape a signup page
   needs - the frame is the artwork's, not one we invented.

   COLOUR - every value below is a literal pixel from the supplied
   layers, not an interpretation:
     #161511  the felt paper black       (background_plain.png)
     #EEA1C8  the crack pink             (background_texture_overlay.png)
     #B8B8B8  the poster type silver     (text.png)
   The pink measures 9.28:1 on the felt, so unlike most artwork
   accents it can carry body text AND the primary button. That is
   what lets the whole interface run on two colours.

   TYPE - width tension, not a second grotesque. The poster face is
   an extreme condensed gothic and it is present on the page as an
   image, so the live chrome takes the opposite width: Archivo
   Expanded for labels, numerals and buttons, regular-width Archivo
   for reading copy. Same superfamily, so they sit together; nearly
   opposite widths, so they never compete.

   SIGNATURE - the step spine. This build is the only one in the
   fleet running all three verifications (form -> SMS code -> email
   confirm), and OTP drop-off is worst when people cannot see how
   much is left. The spine is three cells divided by hairlines in
   the crack pink, driven by the same data-form-state attribute the
   form logic already flips. Numbered because it is genuinely a
   sequence. It is the one decorated element; everything else is
   quiet on purpose.
   ============================================================ */

@font-face {
  font-family: "Archivo Exp";
  src: url("/assets/fonts/ArchivoExp.woff2?v=20260908-8") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/Archivo-var.woff2?v=20260908-8") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --pitch:      #0C0B09;   /* page ground, one step under the felt */
  --felt:       #161511;   /* artwork paper black - panel base */
  --field:      #1E1C18;   /* form field - OPAQUE on purpose, see autofill note */
  --net:        #EEA1C8;   /* artwork crack pink - accent, text AND cta (9.28:1) */
  --net-deep:   #A8567F;   /* deepened crack - structure only */
  --chrome:     #C6C5C1;   /* artwork type silver, lifted for reading contrast */
  --chrome-dim: #8B8983;   /* secondary copy (5.29:1 on felt) */
  --danger:     #E88A94;
  --whatsapp:   #25D366;

  --display: "Archivo Exp", "Helvetica Neue", Arial, sans-serif;
  --body:    "Archivo", "Helvetica Neue", Arial, sans-serif;

  --maxw: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }

/* The `hidden` attribute is only display:none in the UA stylesheet, the weakest
   layer of the cascade, so ANY author rule that sets display beats it and the
   element stays on screen with no error anywhere. Keep this rule ABOVE
   everything that sets display, and never remove it. */
[hidden] { display: none !important; }

/* Ground colour lives on html, NOT body: an opaque body background paints over
   the z-index:-2 .bg layer and the artwork disappears. */
html {
  -webkit-text-size-adjust: 100%;
  background: var(--pitch);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  font-family: var(--body);
  color: var(--chrome-dim);
  background: transparent;
  display: flex;
  flex-direction: column;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- the artwork, rebuilt as the page ground ----------
   Four plates, chosen by aspect ratio rather than width alone: width-only
   breakpoints leave a gap at squarish window shapes where neither the phone
   nor the desktop plate applies. The <link rel=preload> conditions in the
   head mirror these four rules exactly, so nothing preloads unused. */
.bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background-color: var(--pitch);
  background-image: url("/assets/images/bg-mobile-sm.webp?v=20260908-8");
  background-position: center;
  background-size: cover;
}
@media (max-aspect-ratio: 7/10) and (min-width: 501px) {
  .bg { background-image: url("/assets/images/bg-mobile.webp?v=20260908-8"); }
}
@media (min-aspect-ratio: 7/10) {
  .bg { background-image: url("/assets/images/bg-desktop-sm.webp?v=20260908-8"); }
}
@media (min-aspect-ratio: 7/10) and (min-width: 1501px) {
  .bg { background-image: url("/assets/images/bg-desktop.webp?v=20260908-8"); }
}

/* Scrim. ONE gradient, weighted to the centre where the content sits: the net
   is meant to stay legible at the edges, so this only has to sink the middle
   far enough that silver type and a dark panel read cleanly over it. */
.bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 82% at 50% 50%,
      rgba(12,11,9,.34) 0%, rgba(12,11,9,.20) 46%, rgba(12,11,9,0) 100%);
}

/* Dither. Functional: the felt is a scanned paper texture and WebP bands
   visibly across its flat areas without a little tooth on top. */
.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   STAGE
   ============================================================ */
.stage {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;                 /* auto at EVERY breakpoint - never plain 0 */
  padding: clamp(22px, 4vw, 54px) clamp(16px, 4vw, 40px);
  display: flex;
  align-items: center;
}
.stage__inner {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 4vw, 54px);
  align-items: center;
}

/* ---------- the bill: type lockup + promoter logos ---------- */
.bill {
  justify-self: center;
  width: 100%;
  max-width: 520px;
  text-align: center;
}
/* The h1 is the lockup image; its alt text carries the billing. */
.bill__h1 { margin: 0; }
.bill__lockup {
  display: block;
  width: 100%;
  height: auto;
  animation: riseIn .85s cubic-bezier(.16,.84,.36,1) both;
}
.bill__logos {
  display: block;
  width: min(52%, 210px);
  height: auto;
  margin: clamp(20px, 3vw, 30px) auto 0;
  opacity: .9;
  animation: riseIn .85s .22s cubic-bezier(.16,.84,.36,1) both;
}
@keyframes riseIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   SIGNUP PANEL
   ============================================================ */
.signup { justify-self: center; width: 100%; max-width: 500px; }
.panel {
  width: 100%;
  position: relative;
  isolation: isolate;             /* keeps the country dropdown above the top rule */
  background: linear-gradient(180deg, rgba(22,21,17,.94), rgba(12,11,9,.97));
  border: 1px solid rgba(168,86,127,.46);
  border-radius: 3px;
  box-shadow: 0 34px 74px -30px rgba(0,0,0,.92);
  animation: riseIn .85s .12s cubic-bezier(.16,.84,.36,1) both;
  overflow: visible;
}
/* the crack pink drawn as the panel's top edge - the one place the accent
   touches the panel outline, so the card reads as a shard of the poster */
.panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg,
    rgba(168,86,127,0), var(--net-deep) 26%, var(--net) 58%, rgba(238,161,200,0));
  z-index: 0;
}
.panel__inner { position: relative; z-index: 1; padding: clamp(24px, 3.2vw, 36px); }

/* --- state machine (app.js flips data-form-state on .panel) --- */
.panel__state { display: none; }
.panel[data-form-state="idle"]    .panel__idle    { display: block; }
.panel[data-form-state="otp"]     .panel__otp     { display: block; }
.panel[data-form-state="success"] .panel__success { display: block; }

/* ============================================================
   STEP SPINE - the signature element
   Three cells, hairlines in the crack pink, driven by the same
   data-form-state the form logic already sets. Sits OUTSIDE the
   state wrappers because it is panel chrome, not state content.
   ============================================================ */
.spine {
  display: flex;
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  border: 1px solid rgba(168,86,127,.48);
  border-radius: 2px;
  overflow: hidden;
  background: rgba(12,11,9,.5);
}
.spine__step {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 6px 8px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--chrome-dim);
  transition: color .25s ease, background-color .25s ease;
}
.spine__step + .spine__step { border-left: 1px solid rgba(168,86,127,.4); }
.spine__n {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0;
}
.spine__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* current step */
.panel[data-form-state="idle"]    .spine__step:nth-child(1),
.panel[data-form-state="otp"]     .spine__step:nth-child(2),
.panel[data-form-state="success"] .spine__step:nth-child(3) {
  color: var(--net);
  background: rgba(238,161,200,.10);
}
.panel[data-form-state="idle"]    .spine__step:nth-child(1) .spine__n,
.panel[data-form-state="otp"]     .spine__step:nth-child(2) .spine__n,
.panel[data-form-state="success"] .spine__step:nth-child(3) .spine__n {
  background: var(--net);
  border-color: var(--net);
  color: var(--felt);
}
/* completed steps: the numeral is replaced by a tick */
.panel[data-form-state="otp"]     .spine__step:nth-child(1),
.panel[data-form-state="success"] .spine__step:nth-child(1),
.panel[data-form-state="success"] .spine__step:nth-child(2) {
  color: var(--net-deep);
}
.panel[data-form-state="otp"]     .spine__step:nth-child(1) .spine__n,
.panel[data-form-state="success"] .spine__step:nth-child(1) .spine__n,
.panel[data-form-state="success"] .spine__step:nth-child(2) .spine__n {
  font-size: 0;                    /* hide the digit, keep the ring */
  border-color: var(--net-deep);
  background: rgba(168,86,127,.2);
}
.panel[data-form-state="otp"]     .spine__step:nth-child(1) .spine__n::after,
.panel[data-form-state="success"] .spine__step:nth-child(1) .spine__n::after,
.panel[data-form-state="success"] .spine__step:nth-child(2) .spine__n::after {
  content: "";
  width: 7px; height: 4px;
  border: 1.5px solid var(--net);
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg) translate(1px, -1px);
}
@media (max-width: 400px) {
  .spine__step { font-size: 9px; letter-spacing: .04em; gap: 5px; padding: 8px 3px 7px; }
  .spine__n { width: 14px; height: 14px; }
}

/* ============================================================
   PANEL COPY
   ============================================================ */
.panel__title {
  margin: 0 0 12px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.32rem, 3.4vw, 1.62rem);
  line-height: 1.1;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--chrome);
  text-wrap: balance;
}
/* House pattern across the fleet: the second line of the title carries the
   accent. <em> is used for the hook rather than a span so the emphasis is in
   the markup, not only the paint - it is reset from italic because the face
   has no true italic. */
.panel__title em { font-style: normal; color: var(--net); }
.panel__lede {
  margin: 0 0 10px;
  font-size: 15px;
  color: var(--chrome-dim);
  max-width: 46ch;
}
.panel__lede--last { margin-bottom: 20px; }
.panel__lede strong { color: var(--chrome); font-weight: 600; }
.panel__success-note { margin: 0 0 12px; color: var(--net); font-size: 14.5px; }

/* ============================================================
   FORM
   ============================================================ */
.form__row { margin: 0 0 13px; }
/* labels stay for screen readers; placeholders carry the meaning visually */
.form__label {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.form__input {
  width: 100%;
  padding: 13px 14px;
  font-family: var(--body);
  font-size: 16px;                /* 16px minimum or iOS zooms the page on focus */
  color: var(--chrome);
  background: var(--field);       /* OPAQUE - see the autofill rule below */
  border: 1px solid rgba(168,86,127,.45);
  border-radius: 2px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.form__input::placeholder { color: #6D6B66; }
.form__input:focus {
  outline: none;
  border-color: var(--net);
  box-shadow: 0 0 0 3px rgba(238,161,200,.16);
}
.form__input--otp {
  font-family: var(--display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: .42em;
  text-align: center;
  text-indent: .42em;             /* re-centres text that tracking pushes left */
}

/* Chrome paints autofilled inputs pale lavender and IGNORES background /
   background-color on :-webkit-autofill - a huge inset box-shadow is the only
   reliable override. A box-shadow cannot be semi-transparent, so the colour
   must be the FLATTENED OPAQUE equivalent of the field's rendered stack. That
   is trivially --field here because the field was made opaque on purpose; keep
   it opaque, or this value has to be recomputed by compositing field over
   panel over the background plate. */
.form__input:-webkit-autofill,
.form__input:-webkit-autofill:hover,
.form__input:-webkit-autofill:focus,
.form__input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--field) inset !important;
          box-shadow: 0 0 0 1000px var(--field) inset !important;
  -webkit-text-fill-color: var(--chrome) !important;
  caret-color: var(--chrome);
  transition: background-color 9999s ease-in-out 0s;   /* stops the lavender flashing in */
}

.form__error { margin: 7px 0 0; font-size: 13px; color: var(--danger); }
.form__error--global { margin-top: 14px; }

/* Honeypot. display:none ONLY - off-screen positioning stays an autofill
   target in Chrome/Edge, which fills it and silently blocks real signups. */
.hp-row { display: none !important; }

.form__row--check { margin: 17px 0 19px; }
.form__check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--chrome-dim);
  cursor: pointer;
}
.form__check input {
  flex: 0 0 auto;
  width: 17px; height: 17px;
  margin: 1px 0 0;
  accent-color: var(--net);
  cursor: pointer;
}
.form__check a { color: var(--chrome); text-decoration: underline; text-underline-offset: 2px; }
.form__check a:hover { color: var(--net); }

.form__resend {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--chrome-dim);
  text-align: center;
}
.form__resend-btn {
  font: inherit;
  color: var(--net);
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.form__resend-btn:disabled { color: var(--chrome-dim); cursor: default; text-decoration: none; }

/* ---------- buttons ---------- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px 18px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(.8rem, 2.9vw, .92rem);
  letter-spacing: clamp(.05em, .4vw, .1em);
  text-transform: uppercase;
  white-space: nowrap;            /* shrink the type before it can ever wrap */
  text-align: center;
  text-decoration: none;          /* <a class="btn"> needs this, <button> doesn't */
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  transition: transform .12s ease, filter .18s ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: default; }
/* Dark type on the pink: 9.28:1. Silver here would be 1.9:1. */
.btn--primary {
  color: var(--felt);
  background: var(--net);
  box-shadow: 0 12px 28px -14px rgba(238,161,200,.72);
}
.btn--primary:hover:not(:disabled) { filter: brightness(1.07); }
.btn--whatsapp {
  color: #06301A;
  background: var(--whatsapp);
  margin-top: 4px;
}
.btn--whatsapp:hover { filter: brightness(1.06); }
.btn__icon { flex: 0 0 auto; width: 19px; height: 19px; }

.wa-hook { margin: 18px 0 12px; font-size: 13.5px; color: var(--chrome-dim); }
.wa-hook strong { color: var(--chrome); font-weight: 600; }

/* ============================================================
   intl-tel-input v25
   ============================================================ */
.iti { width: 100%; display: block; }
/* app.js re-measures and sets padding-left inline; this is the sane default
   before it runs. Anything >= 80px breaks 320-390px viewports. */
.iti input.form__input { padding-left: calc(52px + 0.7rem); }
.iti__country-container { z-index: 3; }
.iti--inline-dropdown .iti__dropdown-content { z-index: 50; }
/* Until the vendor stylesheet loads, the hidden state does not exist and the
   whole list plus search box flashes open on first paint. */
.iti__dropdown-content.iti__hide { display: none !important; }

.iti__dropdown-content {
  background: var(--felt);
  border: 1px solid rgba(168,86,127,.65);
  border-radius: 3px;
  box-shadow: 0 26px 56px -18px rgba(0,0,0,.94);
  overflow: hidden;
}
.iti__search-input {
  /* Keep the vendor's horizontal padding reservation: 30px left clears the
     absolutely positioned search icon, 28px right clears the clear button. A
     padding SHORTHAND that drops them puts the magnifier on top of the
     placeholder text. Set the vertical values, keep the horizontal ones. */
  padding: 10px 30px 10px 32px;
  width: 100%;
  font-family: var(--body);
  font-size: 14px;
  color: var(--chrome);
  background: var(--field);
  border: 0;
  border-bottom: 1px solid rgba(168,86,127,.5);
}
.iti__search-input::placeholder { color: #6D6B66; }
.iti__search-input:focus { outline: none; background: #23211C; }
.iti__country-list { background: var(--felt); max-height: 240px; }
.iti__country {
  padding: 9px 12px;
  font-family: var(--body);
  font-size: 14px;
  color: var(--chrome);
}
.iti__country:hover,
.iti__country.iti__highlight { background: rgba(238,161,200,.14); }
.iti__dial-code { color: var(--chrome-dim); }
.iti__country-name { color: var(--chrome); }
.iti__selected-country { border-radius: 2px 0 0 2px; }
.iti__selected-country:hover,
.iti__selected-country-primary:hover { background: rgba(238,161,200,.10); }
.iti__selected-dial-code { color: var(--chrome); font-family: var(--body); font-size: 15px; }
.iti__arrow { border-top-color: var(--chrome-dim); }
.iti__arrow--up { border-bottom-color: var(--chrome-dim); }

/* ============================================================
   FOOTER - standard fleet band (basslayerz pattern)
   ============================================================ */
.foot {
  flex-shrink: 0;
  width: 100%;
  margin: 0;
  padding: 18px clamp(16px, 4vw, 40px) 26px;
  background: rgba(12,11,9,.66);
  border-top: 1px solid rgba(168,86,127,.4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.foot__left { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.foot__legal { margin: 0; font-size: 12px; color: var(--chrome-dim); letter-spacing: .02em; }
.foot__legal a { color: var(--chrome-dim); text-decoration: none; }
.foot__legal a:hover { color: var(--net); }
.site-built { margin: 0; }
.site-built a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--chrome-dim);
  text-decoration: none;
}
.site-built a:hover { color: var(--net); }
.site-built img { display: block; opacity: .82; }

/* ============================================================
   RESPONSIVE
   Aspect-ratio thresholds, not width alone.
   ============================================================ */

/* --- two column: bill left, panel right --- */
@media (min-width: 900px) and (min-aspect-ratio: 7/10) {
  .stage__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
    gap: clamp(36px, 4.5vw, 64px);
    align-items: center;
  }
  .bill   { justify-self: end; max-width: 520px; }
  .signup { justify-self: start; }
  .foot   { justify-content: space-between; }
}

@media (max-width: 899px) {
  .foot { justify-content: center; text-align: center; }
  .foot__left { justify-content: center; }
}

/* Phones: stack the footer rather than relying on the flex row wrapping.
   Around 390px the copyright + "built by" row is JUST wide enough to fill the
   band, so centring it is indistinguishable from it running edge to edge - it
   reads as left-aligned even though justify-content is centre. Below 480px,
   force a centred column so every width stacks the same way instead of
   flipping at whatever width the text happens to overflow. */
@media (max-width: 480px) {
  .foot {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-bottom: 22px;
  }
  .foot__left {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  /* Portrait phones: hold the lockup back so the form clears the fold. It is
     nearly square, so every 10vw of width costs ~10vw of height too - measured
     at 390x844, this and the tighter gap lift the sign-up button ~90px. */
  .bill { max-width: min(360px, 68vw); }
  .bill__logos { margin-top: 16px; }
  .stage { padding-top: clamp(16px, 3vw, 54px); }
  .stage__inner { gap: 22px; }
}

/* --- landscape phones are a first-class layout ---
   A rotated phone (844x390, 932x430, 667x375) satisfies both conditions above
   while having almost no height, so the lockup and panel would render cramped
   and the page would scroll badly. Compact side-by-side, lockup height-capped,
   tighter type. Placed AFTER the desktop block so it wins at equal specificity. */
@media (min-width: 640px) and (min-aspect-ratio: 7/10) and (max-height: 520px) {
  .stage { padding: 14px clamp(12px, 3vw, 26px); align-items: flex-start; }
  .stage__inner {
    grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
  }
  .bill { justify-self: center; max-width: none; min-height: 0; }
  .bill__lockup { max-height: calc(100svh - 118px); width: auto; margin: 0 auto; }
  .bill__logos { width: min(48%, 160px); margin-top: 12px; }
  .signup { justify-self: stretch; max-width: none; min-height: 0; }
  .panel__inner { padding: 16px 18px; }
  .spine { margin-bottom: 13px; }
  .panel__title { font-size: 1.15rem; margin-bottom: 8px; }
  .panel__lede { font-size: 13px; margin-bottom: 7px; }
  .panel__lede--last { margin-bottom: 12px; }
  .form__row { margin-bottom: 10px; }
  .form__input { padding: 10px 13px; }
  .form__row--check { margin: 12px 0 13px; }
  .btn { padding: 12px 16px; }
  .iti__country-list { max-height: 150px; }
}

/* --- small phones --- */
@media (max-width: 400px) {
  .panel__inner { padding: 22px 18px; }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
:focus-visible {
  outline: 2px solid var(--net);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}