/* ============================================================================
   JADE — the landing die (accounts Part 2). Behaviour: v3_landing.js.
   Loaded after index.html's own stylesheet; every rule here is .ld-* or
   #landing.ld-page, so nothing reaches the app.

   The account screens have two layouts from one DOM:
   .ld-ui.is-face  real inputs laid over the drawn boxes on the landed face.
                   Sizes are cqw/cqh of the face box; --l/--t/--w/--h are a
                   rect in % of Jade's art (see SCREENS in v3_landing.js).
   .ld-ui.is-win   the same screen in a site window (y2k pink, as STATIONS)
                   over the dimmed die: phones only. Everywhere else every
                   screen stays on the die (Jade, 2026-09-30). Also the terms.
   ========================================================================== */

#landing.ld-page{
  position:relative; display:block; min-height:100vh; min-height:100dvh;
  padding:0; gap:0; text-align:left; transition:opacity .32s ease;
}
#landing.ld-page.ld-leaving{ opacity:0; }

.ld-sr, .ld-ui.is-face .ld-lab, .ld-ui.is-face .ld-drawn, .ld-ui.is-face .ld-hint,
.ld-ui.is-face .ld-heart-lab, .ld-ui.is-face .ld-lock-lab, .ld-ui.is-face .ld-cat-lab{
  position:absolute !important; width:1px !important; height:1px !important; overflow:hidden; clip:rect(0 0 0 0);
  clip-path:inset(50%); white-space:nowrap; margin:0; padding:0; border:0;
}

/* --- the die ---------------------------------------------------------------- */
.ld-stage{
  position:fixed; inset:0; z-index:2; cursor:grab; touch-action:none;
  -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;
  transition:opacity .35s ease, filter .35s ease;
}
.ld-stage.is-dragging{ cursor:grabbing; }
.ld-page.ld-wait .ld-stage{ opacity:0; }
.ld-page.is-rolling .ld-stage{ cursor:default; }
.ld-page.is-dim .ld-stage{ opacity:.38; filter:blur(1.5px); }
.ld-die{ position:absolute; left:50%; top:50%; width:0; height:0; transform-style:preserve-3d; }
.ld-face{
  position:absolute; left:0; top:0; transform-origin:0 0;
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  background-image:var(--tint, none), var(--art);
  background-size:100% 100%; background-repeat:no-repeat; background-blend-mode:multiply;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.ld-page.is-landing .ld-face{ cursor:pointer; }
.ld-stage.is-dragging .ld-face{ cursor:grabbing; }

/* the control row (Jade, 2026-09-30): SPIN on/off, RESET, LOGIN */
.ld-bar{
  position:fixed; z-index:5; left:max(16px, env(safe-area-inset-left)); bottom:max(16px, env(safe-area-inset-bottom));
  display:flex; flex-wrap:wrap; gap:8px; transition:opacity .3s ease;
}
.ld-pill{
  display:inline-flex; align-items:center; gap:6px; padding:6px 13px;
  border:2px solid rgba(255,45,139,.5); border-radius:999px; background:rgba(12,12,12,.62); color:#ffb3d6;
  font-family:"automate", var(--font-mono); font-size:11px; letter-spacing:.12em; cursor:pointer;
  transition:border-color .15s ease, color .15s ease, background-color .15s ease;
}
.ld-pill:hover, .ld-pill:focus-visible{ border-color:#ff2d8b; color:#fff; outline:none; }
.ld-pill:focus-visible{ box-shadow:0 0 0 2px #fff; }
.ld-spin i{ font-style:normal; color:#ff2d8b; }
.ld-spin b{ font-weight:inherit; color:#b3ff00; }
.ld-spin[aria-pressed="false"] b{ color:#ff5fae; }
.ld-spin[hidden]{ display:none; }
.ld-login{ border-color:rgba(179,255,0,.6); color:#b3ff00; }
.ld-login:hover, .ld-login:focus-visible{ border-color:#b3ff00; background:rgba(179,255,0,.14); color:#eaffb0; }
.ld-page.is-rolling .ld-bar{ opacity:.4; pointer-events:none; }
.ld-page.is-account .ld-spin, .ld-page.on-login .ld-login{ display:none; }
.ld-page.on-docked .ld-bar{ display:none; } /* create / reset: nothing that leaves the form */
.ld-page.on-docked .ld-stage{ cursor:default; }           /* ...and the die won't turn */
.ld-page.ld-wait .ld-bar{ opacity:0; }

.ld-noscript{ position:fixed; inset:auto 0 24px; text-align:center; color:#ffb3d6; font-family:var(--font-mono); }

/* --- the account screens: shared -------------------------------------------- */
.ld-ui{ position:fixed; z-index:4; }
.ld-ui .ld-form{ margin:0; }
.ld-chip:empty{ display:none; }

/* --- on the face -------------------------------------------------------------- */
.ld-ui.is-face{ container-type:size; opacity:0; transition:opacity .22s ease; pointer-events:none; }
.ld-ui.is-face.is-in{ opacity:1; }
/* the die stays draggable on an account face: only the controls take the
   pointer, empty parts of the face pass the drag through to it */
.ld-ui.is-face .ld-el{ pointer-events:auto; }
.ld-ui.is-face .ld-note, .ld-ui.is-face .ld-for, .ld-ui.is-face .ld-msg{ pointer-events:none; }
/* while the die is being turned off its face, the flat form steps aside */
.ld-ui.is-face.is-away{ opacity:0; transition-duration:.12s; }
.ld-ui.is-face.is-away .ld-el{ pointer-events:none; }
.ld-ui.is-face .ld-form{ position:absolute; inset:0; }
.ld-ui.is-face .ld-el{
  position:absolute; box-sizing:border-box;
  left:calc(var(--l) * 1%); top:calc(var(--t) * 1%); width:calc(var(--w) * 1%); height:calc(var(--h) * 1%);
}

/* inputs: transparent, over the drawn box */
.ld-ui.is-face .ld-field input{
  display:block; width:100%; height:100%; margin:0; padding:0 1.3cqw;
  border:0; border-radius:.45cqw; background:transparent; outline:none;
  color:#5e0f38; caret-color:#ec008c;
  font-family:var(--font-mono); font-weight:600; letter-spacing:.01em;
  font-size:clamp(11px, calc(var(--h) * .52cqh), 19px);
  transition:box-shadow .15s ease, background-color .15s ease;
}
.ld-ui.is-face .ld-field input::placeholder{ color:rgba(110,20,70,.42); font-weight:500; }
.ld-ui.is-face .ld-field input:focus{
  background:rgba(255,255,255,.2);
  box-shadow:inset 0 0 0 .22cqw rgba(236,0,140,.62), 0 0 1.4cqw rgba(236,0,140,.4);
}
.ld-ui.is-face .ld-field input:-webkit-autofill{
  -webkit-text-fill-color:#5e0f38; transition:background-color 99999s ease 0s; /* keep the drawn box showing */
}
.ld-ui.is-face .ld-field.is-locked input{ color:#8d5a72; cursor:default; padding-right:4cqw; }
.ld-ui.is-face .ld-lockglyph{
  position:absolute; right:1cqw; top:50%; transform:translateY(-50%);
  width:auto; height:62%; aspect-ratio:1; color:#a1005f; opacity:.8; pointer-events:none;
}
.ld-ui.is-face .ld-lockglyph svg{ display:block; width:100%; height:100%; }
.ld-ui.is-face .ld-field.is-bad input{ box-shadow:inset 0 0 0 .3cqw #ed1c24, 0 0 1.2cqw rgba(237,28,36,.45); }
.ld-ui.is-face .ld-chip{
  position:absolute; z-index:3; left:0; top:calc(100% + .5cqh); width:max-content; max-width:40cqw;
  padding:.45cqh .9cqw; border-radius:.5cqw; background:#ed1c24; color:#fff;
  font-family:"automate", var(--font-mono); font-size:max(10px, 1.35cqw); letter-spacing:.04em; line-height:1.25;
  box-shadow:0 .4cqh 1.2cqw rgba(60,0,20,.35); pointer-events:none;
}
.ld-ui.is-face .ld-chip::before{
  content:""; position:absolute; left:1.4cqw; bottom:100%;
  border:.55cqw solid transparent; border-bottom-color:#ed1c24;
}

/* the drawn buttons: invisible hit areas that glow; ::before stretches the hit
   area over the drawn arrow (--arrow, % of the button's width) */
.ld-ui.is-face .ld-btn{
  padding:0; margin:0; border:0; border-radius:.45cqw; background:transparent; cursor:pointer;
  transition:background-color .12s ease, box-shadow .12s ease;
}
.ld-ui.is-face .ld-btn::before{ content:""; position:absolute; top:0; bottom:0; right:100%; width:calc(var(--arrow, 0) * 1%); }
.ld-ui.is-face .ld-btn:not(.is-html) span{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.ld-ui.is-face .ld-btn:hover, .ld-ui.is-face .ld-btn:focus-visible{
  outline:none; background:rgba(236,0,140,.14);
  box-shadow:inset 0 0 0 .2cqw rgba(236,0,140,.6), 0 0 1.3cqw rgba(236,0,140,.5);
}
.ld-ui.is-face .ld-btn:active{ background:rgba(236,0,140,.28); }
.ld-ui.is-face .ld-btn.is-busy{ animation:ldPulse .9s ease-in-out infinite; }
/* a button that is NOT on the art (OH NO's), drawn to match the face's buttons */
.ld-ui.is-face .ld-btn.is-html{
  display:flex; align-items:center; justify-content:center;
  border:.28cqw solid #e98fb3; background:rgba(250,231,221,.9);
  box-shadow:0 .35cqh .9cqw rgba(90,30,40,.25);
  color:#8c1050; font-family:"automate", var(--font-mono); font-size:1.75cqw; letter-spacing:.06em; text-transform:uppercase;
}
.ld-ui.is-face .ld-btn.is-html:hover, .ld-ui.is-face .ld-btn.is-html:focus-visible{
  border-color:#ec008c; background:#fff2ec; box-shadow:0 0 1.4cqw rgba(236,0,140,.55);
}

/* remember-me heart: the button covers the heart and the drawn words */
.ld-heart{ padding:0; margin:0; border:0; background:none; cursor:pointer; color:inherit; }
.ld-ui.is-face .ld-heart svg{
  position:absolute; left:calc(var(--hl) * 1%); top:calc(var(--ht) * 1%);
  width:calc(var(--hw) * 1%); height:calc(var(--hh) * 1%); overflow:visible;
}
.ld-heart .ho, .ld-tick .ho{ fill:#050202; }
.ld-heart .hf, .ld-tick .hf{ fill:transparent; transition:fill .12s ease; }
.ld-heart:hover .hf, .ld-tick:hover .hf{ fill:rgba(237,34,36,.35); }
.ld-heart[aria-checked="true"] .hf, .ld-tick[aria-checked="true"] .hf{ fill:#ed2224; }
.ld-heart:focus-visible, .ld-tick:focus-visible{ outline:2px dashed #ec008c; outline-offset:3px; border-radius:4px; }

/* the heart lock = log in. Same behaviour as Profile's LOGOUT lock (two art
   files, swapped), plus :active so a tap on a phone opens it too, a pulse while
   the password is being checked, and open just before the app loads. */
.ld-lock{ padding:0; margin:0; border:0; background:none; cursor:pointer; isolation:isolate; }
/* The glow is its own soft pink ellipse behind the heart, not a filter on the
   art: Safari boxed a drop-shadow on the open lock to the image (Jade saw it),
   and a radial gradient fades out well inside its own box in every browser. */
.ld-lock::before{
  content:""; position:absolute; z-index:0; left:-34%; right:-34%; top:12%; bottom:-24%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,45,139,.95) 35%, rgba(255,45,139,.45) 62%, rgba(255,45,139,0));
  opacity:0; transition:opacity .2s ease; pointer-events:none;
}
.ld-lock.is-open::before{ opacity:1; }
.ld-lock.is-busy::before{ animation:ldGlowPulse .9s ease-in-out infinite; }
@keyframes ldGlowPulse{ 0%, 100%{ opacity:.35; transform:scale(.92); } 50%{ opacity:1; transform:scale(1.05); } }
.ld-lock img{ z-index:1; }
.ld-lock img{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  pointer-events:none; transition:opacity .15s ease;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 3.5%, #000 96.5%, transparent),
                     linear-gradient(to bottom, transparent, #000 2.5%, #000 97.5%, transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right, transparent, #000 3.5%, #000 96.5%, transparent),
             linear-gradient(to bottom, transparent, #000 2.5%, #000 97.5%, transparent);
  mask-composite:intersect;
}
.ld-lock .un{ opacity:0; }
.ld-lock:hover .un, .ld-lock:focus-visible .un, .ld-lock:active .un, .ld-lock.is-open .un{ opacity:1; }
.ld-lock:hover .lk, .ld-lock:focus-visible .lk, .ld-lock:active .lk, .ld-lock.is-open .lk{ opacity:0; }
.ld-lock.is-busy .un{ opacity:0; }
.ld-lock.is-busy .lk{ opacity:1; }
.ld-lock:focus-visible{ outline:2px dashed #ec008c; outline-offset:4px; border-radius:14px; }
.ld-ui.is-busy .ld-lock, .ld-ui.is-busy .ld-cat{ cursor:progress; }
@keyframes ldPulse{
  0%, 100%{ filter:drop-shadow(0 0 .5cqw rgba(255,45,139,.45)); }
  50%{ filter:drop-shadow(0 0 2.4cqw rgba(255,45,139,.95)) brightness(1.08); }
}

/* --- JOIN WAITLIST (WAITLIST BLANK.png) ---------------------------------------- */
/* Jade's placeholders are a faint pink (<instagram>, <referral name>...) */
.ld-ui.is-face .ld-field.ph-pink input::placeholder{ color:rgba(236,0,140,.36); font-weight:400; }
/* her pink SUBMIT square is drawn without its word: the word is live, and the
   glow is a soft box-shadow on a layer the shape of the square (no image filter,
   which Safari boxes) */
.ld-submitsq{ padding:0; margin:0; border:0; background:none; cursor:pointer; isolation:isolate; }
.ld-submitsq::before{
  content:""; position:absolute; inset:2%; z-index:0; border-radius:12%;
  box-shadow:0 0 2.2cqw rgba(255,45,139,.85), inset 0 0 1.4cqw rgba(255,255,255,.35);
  opacity:0; transition:opacity .18s ease; pointer-events:none;
}
.ld-submitsq span{
  position:relative; z-index:1; display:block; transform:translateY(-1%);
  font-family:"License Plate", "Anton", sans-serif; font-weight:400; font-size:3.3cqw; line-height:1; letter-spacing:.03em; color:#120a0e; text-transform:uppercase;
  text-shadow:0 0 .25cqw #fff, 0 0 .25cqw #fff, 0 .2cqh .5cqw rgba(255,255,255,.6);
  transition:transform .1s ease;
}
.ld-submitsq:hover::before, .ld-submitsq:focus-visible::before{ opacity:1; }
.ld-submitsq:focus-visible{ outline:2px dashed #ec008c; outline-offset:4px; border-radius:14%; }
.ld-submitsq:active span{ transform:translateY(4%) scale(.97); }
.ld-submitsq.is-busy::before{ animation:ldGlowPulse .9s ease-in-out infinite; }
/* the honeypot: off-screen, never display:none */
.ld-hp{ position:absolute !important; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
/* on a phone (window): Jade's pink SUBMIT square itself (DICEFACES/PNG/submit@3x.png),
   the word live on it as on the face */
.ld-ui.is-win .ld-submitsq{
  align-self:center; display:grid; place-items:center; width:128px; height:128px; margin:6px 0 2px;
  background:url("v3_submit.png") center / contain no-repeat;
}
.ld-ui.is-win .ld-submitsq::before{ inset:5%; border-radius:13%; box-shadow:0 0 18px rgba(255,45,139,.85), inset 0 0 10px rgba(255,255,255,.35); }
.ld-ui.is-win .ld-submitsq span{ font-size:30px; }

/* handle rows in the phone window, after Jade's SOCIALMEDIA piece: her pink circle
   holding the platform icon, then a soft box (no arrows in the window: Jade). On
   the face all of this is drawn, so these bits only exist in the window. */
.ld-sc-dot{ display:none; }
.ld-ui.is-win .ld-field.is-social{ display:flex; flex-wrap:wrap; align-items:center; }
.ld-ui.is-win .ld-field.is-social .ld-lab{
  position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; margin:0;
}
.ld-ui.is-win .ld-sc-dot{
  display:block; order:1; flex:none; position:relative; z-index:1; width:46px; height:46px; margin-right:-12px;
  border-radius:50%; background:#ed0677; box-shadow:0 0 0 1.5px #f5a7c9;
}
.ld-ui.is-win .ld-sc-dot img{ position:absolute; inset:9%; width:82%; height:82%; display:block; }
/* Discogs is black record wedges with open gaps: it sits on its white 80x80 circle (Jade) */
.ld-ui.is-win .ld-sc-dot.is-discogs img{ background:#fff; border-radius:50%; }
.ld-ui.is-win .ld-field.is-social input{
  order:2; flex:1 1 0; min-width:0; padding-left:20px;
  border:3px solid rgba(214,182,184,.9); border-radius:7px; background:rgba(255,255,255,.04);
  box-shadow:0 0 4px rgba(190,150,152,.7), inset 0 0 3px rgba(190,150,152,.45);
}
.ld-ui.is-win .ld-field.is-social input:focus{ border-color:#f5a7c9; box-shadow:0 0 10px rgba(255,45,139,.5); }
.ld-ui.is-win .ld-field.is-social .ld-chip{ order:4; flex-basis:100%; }
.ld-ui.is-win .ld-field.is-social.is-bad input{ border-color:#ed1c24; }

/* the cat = create account. One art file, so its states are effects. */
.ld-cat{ padding:0; margin:0; border:0; background:none; cursor:pointer; transition:transform .12s ease, filter .15s ease; }
.ld-cat img{ display:block; width:100%; height:100%; pointer-events:none; }
.ld-cat:hover, .ld-cat:focus-visible{
  outline:none; transform:scale(1.045);
  filter:brightness(1.07) drop-shadow(0 0 1.5cqw rgba(232,230,30,.9));
}
.ld-cat:active{ transform:scale(.96); }
.ld-cat.is-off{ filter:grayscale(.8) opacity(.5); transform:none; cursor:not-allowed; }
.ld-cat.is-busy{ animation:ldCatPulse .9s ease-in-out infinite; }
@keyframes ldCatPulse{
  0%, 100%{ filter:drop-shadow(0 0 .6cqw rgba(232,230,30,.5)); }
  50%{ filter:drop-shadow(0 0 2.6cqw rgba(232,230,30,1)) brightness(1.1); }
}

/* terms + privacy: heart, then the words (the words are a link) */
.ld-terms{
  display:flex; align-items:center; justify-content:center; gap:.8cqw; white-space:nowrap;
  font-family:"automate", var(--font-mono); text-transform:uppercase; letter-spacing:.03em; color:#ec008c;
}
.ld-ui.is-face .ld-terms{ font-size:1.42cqw; }
.ld-tick{ position:relative; flex:none; height:100%; aspect-ratio:495 / 457; padding:0; margin:0; border:0; background:none; cursor:pointer; }
.ld-tick::after{ content:""; position:absolute; inset:-55% -45%; } /* a finger-sized target */
.ld-tick svg{ display:block; width:100%; height:100%; overflow:visible; }
.ld-terms-lab{ cursor:pointer; }
.ld-terms-link{ color:#a1005f; text-decoration:underline; text-underline-offset:2px; }
.ld-terms-link:hover, .ld-terms-link:focus-visible{ color:#ec008c; }
.ld-terms.is-bad .ld-tick{ animation:ldShake .32s ease; }
.ld-terms.is-bad .ld-tick .hf{ fill:rgba(237,28,36,.35); }
.ld-ui.is-face .ld-terms .ld-chip{ left:50%; transform:translateX(-50%); white-space:nowrap; }
.ld-ui.is-face .ld-terms .ld-chip::before{ left:50%; margin-left:-.55cqw; }
@keyframes ldShake{ 25%{ transform:translateX(-12%); } 75%{ transform:translateX(12%); } }

/* lines of HTML text on a face */
.ld-note, .ld-for{
  display:flex; align-items:center; justify-content:center; margin:0; text-align:center;
  font-family:"automate", var(--font-mono); text-transform:uppercase; letter-spacing:.05em;
}
.ld-ui.is-face .ld-note{ font-size:1.7cqw; color:#0b8a3a; text-shadow:0 0 .8cqw rgba(255,255,255,.7); }
.ld-note:empty{ display:none; }
.ld-ui.is-face .ld-for{ font-family:var(--font-mono); text-transform:none; font-weight:600; font-size:2.1cqw; color:#5e0f38; }

/* OH NO's message: in the gap under the cat on Jade's template, styled like
   her guestlist line (big pink caps; --msg-size in cqw, smaller as it grows),
   kept inside the narrowing triangle by two floats shaped like its edges. The
   gap runs 55.4%..71.4% down (above the drawn BACK TO LOGIN), where the
   triangle's half-width is (1 - y) / 2. */
.ld-ui.is-face .ld-msg{
  margin:0; text-align:center; color:#ec008c;
  font-family:"automate", var(--font-mono); font-size:calc(var(--msg-size, 3) * 1cqw);
  line-height:1.2; letter-spacing:.03em; text-transform:uppercase;
}
.ld-msg-l, .ld-msg-r{ display:none; }
.ld-msg .ld-nocaps{ font-weight:inherit; text-transform:none; font-size:.86em; }
.ld-ui.is-face .ld-msg-l, .ld-ui.is-face .ld-msg-r{ display:block; height:100%; width:37.7%; }
.ld-ui.is-face .ld-msg-l{ float:left; shape-outside:polygon(0 0, 78.8% 0, 100% 100%, 0 100%); }
.ld-ui.is-face .ld-msg-r{ float:right; shape-outside:polygon(21.2% 0, 100% 0, 100% 100%, 0 100%); }
/* SUCCESS's second line (the waitlist): smaller, under the headline */
.ld-msg-sub{ display:block; text-wrap:pretty; }
.ld-ui.is-face .ld-msg-sub{ margin-top:.45em; font-size:.56em; line-height:1.3; letter-spacing:.03em; color:#a1005f; }

/* a plain link on a face that opens a window (the waitlist's FAQ), styled like
   the terms + privacy link on CREATE ACCOUNT */
.ld-doclink{
  display:flex; align-items:center; justify-content:flex-start; padding:0; margin:0; border:0; background:none; cursor:pointer;
  font-family:"automate", var(--font-mono); text-transform:uppercase; letter-spacing:.06em; color:#a1005f;
}
.ld-doclink span{ text-decoration:underline; text-underline-offset:.18em; }
.ld-doclink:hover, .ld-doclink:focus-visible{ color:#ec008c; outline:none; }
.ld-ui.is-face .ld-doclink{ font-size:2.3cqw; }

/* an error that stays on its form (rate limit, network), under the form's button */
.ld-formchip{ margin:0; }
.ld-ui.is-face .ld-formchip{
  position:absolute; z-index:3; transform:translate(-50%, .8cqh); width:max-content; max-width:34cqw;
  padding:.5cqh 1cqw; border-radius:.5cqw; background:#ed1c24; color:#fff; text-align:center;
  font-family:"automate", var(--font-mono); font-size:max(10px, 1.35cqw); letter-spacing:.04em; line-height:1.25;
  box-shadow:0 .4cqh 1.2cqw rgba(60,0,20,.35); pointer-events:none;
}
.ld-ui.is-win .ld-formchip{ text-align:center; color:#ff8fa3; font-size:12px; letter-spacing:.03em; }

/* a phone keeps OH NO on the die: its drawn buttons get finger-sized hit areas */
.ld-ui.is-face.is-phone .ld-btn::after{ content:""; position:absolute; inset:-10% -14%; } /* the two drawn buttons are 0.8% apart */

/* --- the glitch swap ---------------------------------------------------------- */
.ld-glitch{ position:fixed; z-index:3; pointer-events:none; clip-path:polygon(0 0, 100% 0, 50% 100%); }
.ld-glitch i{
  position:absolute; inset:0;
  background-image:var(--tint, none), var(--art); background-size:100% 100%; background-repeat:no-repeat;
  background-blend-mode:multiply;
}
.ld-glitch i:nth-child(1){ animation:ldGlitch0 .4s steps(1, end) both; }
/* slices of the new art, knocked sideways, with a hot pink / bright green fringe
   (the site's #ff2d8b / #b3ff00; Jade: green and pink, no blue) */
.ld-glitch i:nth-child(2){ filter:drop-shadow(5px 0 0 rgba(255,45,139,.9)) drop-shadow(-4px 0 0 rgba(179,255,0,.85)); animation:ldGlitch1 .4s steps(1, end) both; }
.ld-glitch i:nth-child(3){ filter:sepia(1) saturate(5) hue-rotate(40deg) brightness(1.08) drop-shadow(-5px 0 0 rgba(255,45,139,.7)); animation:ldGlitch2 .4s steps(1, end) both; }
@keyframes ldGlitch0{
  0%{ opacity:0; }
  15%{ opacity:.7; transform:translateX(-1.4%); }
  28%{ opacity:0; }
  40%{ opacity:1; transform:translateX(1%); }
  55%{ transform:translateX(-.5%); }
  70%, 100%{ opacity:1; transform:none; }
}
@keyframes ldGlitch1{
  0%{ opacity:.9; clip-path:inset(12% 0 70% 0); transform:translateX(-3%); }
  20%{ clip-path:inset(46% 0 34% 0); transform:translateX(4%); }
  40%{ clip-path:inset(22% 0 61% 0); transform:translateX(-2%); }
  60%{ clip-path:inset(63% 0 19% 0); transform:translateX(3%); }
  80%{ clip-path:inset(31% 0 56% 0); transform:translateX(-1%); }
  100%{ opacity:0; }
}
@keyframes ldGlitch2{
  0%{ opacity:.8; clip-path:inset(58% 0 26% 0); transform:translateX(2.5%); }
  25%{ clip-path:inset(8% 0 81% 0); transform:translateX(-3.5%); }
  50%{ clip-path:inset(38% 0 47% 0); transform:translateX(2%); }
  75%{ clip-path:inset(71% 0 12% 0); transform:translateX(-1.5%); }
  100%{ opacity:0; }
}
.ld-form.is-glitch-out{ animation:ldUiOut .17s steps(2, end) forwards; }
.ld-form.is-glitch-in{ animation:ldUiIn .24s steps(3, end) both; }
@keyframes ldUiOut{
  0%{ opacity:1; }
  50%{ opacity:.55; transform:translateX(1.2%); filter:drop-shadow(3px 0 0 #b3ff00) drop-shadow(-3px 0 0 #ff2d8b); }
  100%{ opacity:0; transform:translateX(-.8%); }
}
@keyframes ldUiIn{
  0%{ opacity:0; transform:translateX(-1%); }
  40%{ opacity:.6; transform:translateX(.8%); filter:drop-shadow(-3px 0 0 #b3ff00) drop-shadow(3px 0 0 #ff2d8b); }
  100%{ opacity:1; transform:none; filter:none; }
}

/* --- in a window (phones, short windows, and the terms) ------------------------ */
.ld-ui.is-win{
  inset:0; z-index:6; display:flex; align-items:center; justify-content:center; overflow:auto;
  padding:max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  background:rgba(8,6,10,.45); opacity:0; transition:opacity .2s ease;
}
.ld-ui.is-win.is-in{ opacity:1; }
.ld-doc-win{ z-index:7; background:rgba(8,6,10,.6); }
.ld-win{
  position:relative; display:flex; flex-direction:column; width:min(440px, 100%); max-height:100%;
  margin:auto; border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg, #ffd9ec 0, #ff2d8b 62px, #a3005a 150px, #4d0029 100%);
  box-shadow:0 20px 45px rgba(0,0,0,.65), inset 0 0 0 1px rgba(0,0,0,.4);
  font-family:"automate", var(--font-mono);
}
.ld-win-wide{ width:min(640px, 100%); }
.ld-win-gloss{
  position:absolute; z-index:1; top:3px; left:5%; width:40%; height:52px; border-radius:999px; pointer-events:none;
  background:radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.95), rgba(255,255,255,0) 70%);
}
.ld-win-bar{
  position:relative; z-index:2; flex:none; height:42px; display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:0 9px 0 18px;
}
.ld-win-title{
  font-size:18px; letter-spacing:.03em; color:#101010; text-shadow:0 1px 0 rgba(255,255,255,.35);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ld-win-x{
  flex:none; width:30px; height:30px; display:grid; place-items:center; padding:0;
  border:2px solid rgba(16,16,16,.75); border-radius:8px; background:rgba(255,255,255,.3);
  color:#101010; font-size:14px; line-height:1; cursor:pointer;
}
.ld-win-x:hover, .ld-win-x:focus-visible{ background:#fff; outline:none; }
.ld-win-screen{
  position:relative; z-index:2; margin:0 10px 10px; padding:18px 16px 20px; overflow:auto;
  border-radius:10px; background:linear-gradient(180deg, #211936 0%, #3b1022 100%);
  box-shadow:inset 0 3px 8px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,45,139,.15);
  color:#fff; -webkit-overflow-scrolling:touch;
}
.ld-ui.is-win .ld-form{ display:flex; flex-direction:column; gap:13px; }
.ld-ui.is-win .ld-el{ position:relative; }
.ld-ui.is-win .ld-lab{ display:block; margin-bottom:5px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#ff8fc8; }
.ld-ui.is-win .ld-field input{
  display:block; width:100%; margin:0; padding:10px 12px;
  border:3px solid #ff2d8b; border-radius:9px; background:rgba(255,45,139,.1); color:#fff; outline:none;
  font-family:var(--font-mono); font-size:16px; /* 16px keeps iOS from zooming in */
}
.ld-ui.is-win .ld-field input::placeholder{ color:rgba(255,180,214,.45); }
.ld-ui.is-win .ld-field input:focus{ box-shadow:0 0 12px rgba(255,45,139,.55); }
.ld-ui.is-win .ld-field.is-locked input{ border-color:rgba(255,45,139,.45); color:#d9a6c0; padding-right:40px; }
.ld-ui.is-win .ld-lockglyph{ position:absolute; right:12px; bottom:12px; width:18px; height:18px; color:#ff8fc8; pointer-events:none; }
.ld-ui.is-win .ld-lockglyph svg{ display:block; width:100%; height:100%; }
.ld-ui.is-win .ld-hint{ margin:5px 0 0; font-size:10.5px; letter-spacing:.04em; color:rgba(255,255,255,.62); text-transform:uppercase; }
.ld-ui.is-win .ld-field.is-bad input{ border-color:#ed1c24; box-shadow:0 0 12px rgba(237,28,36,.5); }
.ld-ui.is-win .ld-chip{ display:block; margin-top:6px; color:#ff8fa3; font-size:12px; letter-spacing:.03em; }
.ld-ui.is-win .ld-drawn{ margin:0; font-size:12px; line-height:1.55; letter-spacing:.03em; color:rgba(255,255,255,.78); }
.ld-ui.is-win .ld-btn{
  align-self:stretch; padding:10px 16px; border:3px solid #ff2d8b; border-radius:9px;
  background:rgba(236,0,140,.2); color:#fff; cursor:pointer;
  font-family:"automate", var(--font-mono); font-size:14px; letter-spacing:.08em; text-transform:uppercase;
}
.ld-ui.is-win .ld-btn[type="submit"]{ background:#ff2d8b; color:#1a0010; }
.ld-ui.is-win .ld-btn:hover, .ld-ui.is-win .ld-btn:focus-visible{ background:#ff2d8b; color:#1a0010; outline:none; }
.ld-ui.is-win .ld-btn.is-busy{ opacity:.7; }
.ld-ui.is-win .ld-heart{ display:flex; align-items:center; gap:10px; font-family:"automate", var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#ffb3d6; text-align:left; }
.ld-ui.is-win .ld-heart svg{ flex:none; width:24px; height:22px; }
.ld-ui.is-win .ld-heart .ho, .ld-ui.is-win .ld-tick .ho{ fill:#ffd9ec; }
.ld-ui.is-win .ld-lock{ align-self:center; display:flex; flex-direction:column; align-items:center; width:110px; padding-top:136px; color:#ffb3d6; }
.ld-ui.is-win .ld-lock img{ inset:0 auto auto 50%; width:104px; height:127px; transform:translateX(-50%); }
.ld-ui.is-win .ld-lock::before{ left:-6px; right:-6px; top:26px; bottom:22px; }
.ld-ui.is-win .ld-lock-lab{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
.ld-ui.is-win .ld-lock .lk{ opacity:1; }
.ld-ui.is-win .ld-lock:hover .lk, .ld-ui.is-win .ld-lock:active .lk, .ld-ui.is-win .ld-lock:focus-visible .lk, .ld-ui.is-win .ld-lock.is-open .lk{ opacity:0; }
.ld-ui.is-win .ld-lock.is-busy .lk{ opacity:1; }
.ld-ui.is-win .ld-cat{ align-self:center; display:flex; flex-direction:column; align-items:center; gap:6px; width:150px; color:#e8e61e; }
.ld-ui.is-win .ld-cat img{ width:150px; height:131px; }
.ld-ui.is-win .ld-cat-lab{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.ld-ui.is-win .ld-terms{ justify-content:flex-start; flex-wrap:wrap; height:auto; font-size:12px; color:#ffb3d6; white-space:normal; }
.ld-ui.is-win .ld-tick{ height:22px; }
.ld-ui.is-win .ld-terms-link{ color:#fff; }
.ld-ui.is-win .ld-terms .ld-chip{ flex-basis:100%; }
.ld-ui.is-win .ld-note{ font-size:12px; color:#b3ff00; }
.ld-ui.is-win .ld-for{ font-family:var(--font-mono); text-transform:none; font-size:14px; color:#fff; }
.ld-ui.is-win .ld-doclink{ align-self:flex-start; min-height:34px; margin:-8px 0; padding:0 18px 0 0; font-size:14px; color:#fff; }
.ld-ui.is-win .ld-doclink:hover, .ld-ui.is-win .ld-doclink:focus-visible{ color:#ff8fc8; }
.ld-ui.is-win .ld-msg-sub{ margin-top:6px; font-size:12px; letter-spacing:.03em; color:rgba(255,255,255,.78); }
.ld-ui.is-win .ld-msg{ margin:4px 0; text-align:center; font-family:"automate", var(--font-mono); font-size:15px; line-height:1.45; letter-spacing:.04em; text-transform:uppercase; color:#fff; }

/* the terms page */
.ld-doc{ font-family:var(--font-mono); font-size:13px; line-height:1.65; color:rgba(255,255,255,.88); }
.ld-doc h2, .ld-doc h3, .ld-doc h4{ margin:18px 0 8px; font-family:"automate", var(--font-mono); font-weight:400; text-transform:uppercase; letter-spacing:.06em; color:#ff8fc8; }
.ld-doc > :first-child{ margin-top:0; }
.ld-doc h2{ margin-top:0; font-size:17px; color:#b3ff00; }
.ld-doc h3{ font-size:14px; }
.ld-doc p{ margin:0 0 10px; }
.ld-doc ul{ margin:0 0 10px; padding-left:20px; }
.ld-doc li{ margin:0 0 6px; }
.ld-doc strong{ color:#fff; }
.ld-doc a{ color:#b3ff00; }
.ld-doc mark{ background:#e8e61e; color:#1a0010; padding:0 3px; border-radius:3px; }

@media (prefers-reduced-motion: reduce){
  .ld-ui, .ld-stage, #landing.ld-page{ transition:none; }
  .ld-cat.is-busy, .ld-btn.is-busy{ animation:none; filter:drop-shadow(0 0 1.6cqw rgba(255,45,139,.85)); }
  .ld-lock.is-busy::before{ animation:none; opacity:.85; }
}