/* New look sign-in screens (data-look="new"): the mockup's login.html and onboarding.html step 1, as one shared set.
 * Everything is scoped under .nl-auth. The local variables are the mockup's own, light and dark, with the values the token
 * map changed for AA (docs/new-look/token-map.md): light ember text #BD390D, light muted #6A6A72, dark muted #82828C,
 * danger ink #C22D2D, and control borders at 3:1 (--nl-ctl). Dark is html[data-theme="dark"], as everywhere in the app. */
.nl-auth {
  --nl-bg: #fafaf8; --nl-pane: #ffffff; --nl-panel: #ffffff; --nl-panel2: #f4f3f0;
  --nl-line: rgba(17,17,19,.08); --nl-line2: rgba(17,17,19,.16); --nl-ctl: #928c7c;
  --nl-text: #111113; --nl-text2: #46464e; --nl-muted: #6a6a72;
  --nl-ember: #bd390d; --nl-ember-fill: #f04a12; --nl-ember-ink: #111113; --nl-ember-soft: rgba(240,74,18,.08); --nl-ember-line: rgba(240,74,18,.5);
  --nl-good: #107648; --nl-good-soft: rgba(18,128,79,.09); --nl-bad: #c22d2d;
  --nl-field: #f3f2ee; --nl-ink: 17,17,19; --nl-off: .075; --nl-ease: cubic-bezier(.2,.8,.2,1);
  --nl-shadow: 0 40px 100px -40px rgba(40,28,14,.28);
  --nl-font: var(--font-geist), system-ui, sans-serif; --nl-mono: var(--font-geist-mono), ui-monospace, monospace;
  position: relative; min-height: 100dvh; background: var(--nl-bg); color: var(--nl-text);
  font: 15px/1.5 var(--nl-font); -webkit-font-smoothing: antialiased; color-scheme: light;
}
html[data-theme="dark"] .nl-auth {
  --nl-bg: #08080a; --nl-pane: #0a0a0d; --nl-panel: #111114; --nl-panel2: #17171b;
  --nl-line: rgba(255,255,255,.08); --nl-line2: rgba(255,255,255,.15); --nl-ctl: #6f6f78;
  --nl-text: #ededef; --nl-text2: #b4b4bc; --nl-muted: #82828c;
  --nl-ember: #ff5a1f; --nl-ember-fill: #ff5a1f; --nl-ember-ink: #08080a; --nl-ember-soft: rgba(255,90,31,.12); --nl-ember-line: rgba(255,90,31,.45);
  --nl-good: #3dd68c; --nl-good-soft: rgba(61,214,140,.12); --nl-bad: #ff6b6b;
  --nl-field: #060608; --nl-ink: 237,237,239; --nl-off: .12;
  --nl-shadow: 0 50px 120px -40px rgba(0,0,0,.75); color-scheme: dark;
}
.nl-auth *, .nl-auth *::before, .nl-auth *::after { box-sizing: border-box; }
:where(.nl-auth) :where(button, input) { font: inherit; color: inherit; }
:where(.nl-auth) button { background: none; border: 0; cursor: pointer; }
.nl-auth button:focus-visible, .nl-auth a:focus-visible { outline: 2px solid var(--nl-ember); outline-offset: 2px; }

/* Phone: the art band is 22vh (was 30vh) so the sign-up buttons and the email field start higher on the first screen. */
.nl-ob { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 22vh auto; min-height: 100dvh; }
.nl-pane { position: relative; display: grid; grid-template-rows: auto 1fr auto; grid-row: 2; background: var(--nl-pane); min-height: 0; z-index: 2; }
.nl-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 32px; }
.nl-brand { display: flex; align-items: center; gap: 10px; color: var(--nl-text); text-decoration: none; font-weight: 600; letter-spacing: -0.02em; font-size: 16px; }
.nl-brand-row { display: flex; align-items: center; gap: 14px; min-width: 0; }
.nl-prog { display: inline-flex; align-items: baseline; gap: 5px; padding-left: 14px; border-left: 1px solid var(--nl-line); font: 500 11.5px/1 var(--nl-mono); letter-spacing: .06em; color: var(--nl-muted); }
.nl-prog b { color: var(--nl-text); font-weight: 500; }
.nl-icon-btn { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--nl-text2); border: 1px solid var(--nl-line); transition: background .2s, color .2s; overflow: hidden; }
.nl-icon-btn:hover { background: var(--nl-panel2); color: var(--nl-text); }
.nl-icon-btn svg { display: block; transition: transform .6s cubic-bezier(.3,1.5,.5,1); }
.nl-icon-btn.spin svg { transform: rotate(120deg); }
.nl-icon-btn circle { transform-box: fill-box; transform-origin: center; animation: nlDotIn .5s cubic-bezier(.34,1.56,.64,1) both; animation-delay: var(--d, 0s); }
@keyframes nlDotIn { from { transform: scale(0); opacity: 0; } }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
@media (prefers-reduced-motion: reduce) { .nl-icon-btn circle, .nl-icon-btn svg { animation: none; transition: none; } }

.nl-main { grid-row: 2; display: flex; flex-direction: column; justify-content: center; padding: 24px 16px 20px; min-height: 0; }
/* No opacity fade and no start delay: the text paints on the first frame (it used to be invisible for 160ms + 100ms per item, which delayed LCP on /register). The small rise stays. */
.nl-main > * { animation: nlRise 600ms var(--nl-ease) both; }
@keyframes nlRise { from { transform: translateY(10px); } }
.nl-eyebrow { font: 500 11.5px var(--nl-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--nl-ember); display: flex; align-items: center; gap: 10px; }
.nl-eyebrow::before { content: ""; width: 18px; height: 1px; background: currentColor; opacity: .6; }
.nl-h1 { font-size: 34px; line-height: 1.02; letter-spacing: -0.05em; font-weight: 600; margin: 16px 0 12px; }
.nl-h1 em { font-style: normal; color: var(--nl-ember); }
.nl-lede { color: var(--nl-text2); font-size: 16px; line-height: 1.6; max-width: 430px; margin: 0; }
.nl-block { margin-top: 24px; display: grid; gap: 10px; max-width: 440px; }

.nl-sso { display: flex; align-items: center; gap: 12px; width: 100%; height: 50px; padding: 0 16px; border-radius: 13px; border: 1px solid var(--nl-ctl); background: var(--nl-panel); color: var(--nl-text); font-weight: 500; text-align: left; transition: border-color .2s, transform .2s var(--nl-ease); }
.nl-sso:hover { border-color: var(--nl-text2); transform: translateY(-1px); }
.nl-sso .nl-k { margin-left: auto; color: var(--nl-ember); font: 500 12px var(--nl-mono); }
.nl-sso:disabled { pointer-events: none; opacity: .7; }
.nl-or { display: flex; align-items: center; gap: 12px; color: var(--nl-muted); font: 500 11px var(--nl-mono); letter-spacing: .1em; margin: 4px 0; }
.nl-or::before, .nl-or::after { content: ""; flex: 1; height: 1px; background: var(--nl-line); }
.nl-lbl { display: flex; justify-content: space-between; align-items: baseline; font: 500 11.5px var(--nl-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--nl-muted); }
.nl-lbl a { text-transform: none; letter-spacing: 0; font: 500 12.5px var(--nl-font); }
.nl-input { position: relative; display: flex; align-items: center; height: 50px; border-radius: 13px; border: 1px solid var(--nl-ctl); background: var(--nl-panel2); transition: border-color .2s, box-shadow .2s, background .2s; }
.nl-input:hover { border-color: color-mix(in srgb, var(--nl-text) 28%, var(--nl-ctl)); }
.nl-input:focus-within { border-color: var(--nl-ember); box-shadow: 0 0 0 4px var(--nl-ember-soft), 0 10px 30px -14px var(--nl-ember-line); background: var(--nl-panel); }
.nl-input input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: 0; padding: 0 16px; font-size: 16px; caret-color: var(--nl-ember); }
.nl-input input::placeholder { color: var(--nl-muted); }
.nl-input input::selection { background: var(--nl-ember-soft); }
.nl-input.bad { border-color: var(--nl-bad); }
.nl-input .nl-go-in { margin-right: 6px; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: var(--nl-muted); transition: background .2s, color .2s; }
.nl-input .nl-go-in.ok { background: var(--nl-ember-fill); color: var(--nl-ember-ink); }
.nl-reveal { margin-right: 8px; height: 32px; padding: 0 10px; border-radius: 8px; font: 500 11.5px var(--nl-mono); color: var(--nl-muted); }
.nl-reveal:hover { background: var(--nl-panel2); color: var(--nl-text); }
.nl-msg { font-size: 12.5px; line-height: 1.45; min-height: 18px; color: var(--nl-bad); margin: 0; }
.nl-msg.note { color: var(--nl-text2); }
.nl-msg.good { color: var(--nl-good); }
.nl-msg:empty { min-height: 0; }
.nl-msg button { margin-top: 4px; display: block; font-weight: 600; text-decoration: underline; color: inherit; }
.nl-msg button:hover { text-decoration: none; }
.nl-msg button:disabled { opacity: .5; }
.nl-link { color: var(--nl-ember); font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--nl-ember-line); }
.nl-link:hover { border-color: var(--nl-ember); }
.nl-fine { color: var(--nl-muted); font-size: 12.5px; line-height: 1.55; margin: 0; }

/* primary button: ember on a faint dot grid, the label rolls up and the arrow slides, as .w-btn.primary.lg in the mockup */
.nl-btn { --bh: 52px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: var(--bh); padding: 0 24px; border-radius: 14px; border: 0;
  isolation: isolate; overflow: hidden; text-decoration: none; font: 600 15.5px var(--nl-font); letter-spacing: -0.01em; white-space: nowrap; color: var(--nl-ember-ink);
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--nl-ember-ink) 15%, transparent) .9px, transparent 1.7px) 50% 50% / 6px 6px, var(--nl-ember-fill);
  box-shadow: 0 8px 24px -10px rgba(255,90,31,.7), inset 0 1px 0 rgba(255,255,255,.25); transition: transform .5s cubic-bezier(.3,1.5,.5,1), box-shadow .4s var(--nl-ease); }
.nl-btn:hover { box-shadow: 0 14px 34px -10px rgba(255,90,31,.85), inset 0 1px 0 rgba(255,255,255,.3); }
.nl-btn:active { transform: scale(.97); }
.nl-btn:disabled, .nl-btn[aria-disabled="true"] { cursor: not-allowed; opacity: .55; box-shadow: none; transform: none; }
.nl-btn-label { position: relative; display: inline-block; overflow: hidden; height: 1.3em; line-height: 1.3em; }
.nl-btn-label span { display: block; transition: transform .55s var(--nl-ease); }
.nl-btn-label span + span { position: absolute; left: 0; top: 100%; }
.nl-btn:hover:not(:disabled) .nl-btn-label span { transform: translateY(-100%); }
.nl-btn-arrow { position: relative; width: 16px; height: 16px; overflow: hidden; flex: none; }
.nl-btn-arrow svg { position: absolute; inset: 0; transition: transform .55s var(--nl-ease); }
.nl-btn-arrow svg + svg { transform: translateX(-140%); }
.nl-btn:hover:not(:disabled) .nl-btn-arrow svg:first-child { transform: translateX(140%); }
.nl-btn:hover:not(:disabled) .nl-btn-arrow svg + svg { transform: none; }

.nl-foot { grid-row: 3; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--nl-line); font-size: 13.5px; color: var(--nl-muted); }
.nl-foot .nl-foot-end { margin-left: auto; font-size: 12.5px; }

.nl-field { position: relative; grid-row: 1; background: var(--nl-field); overflow: hidden; min-height: 0; border-bottom: 1px solid var(--nl-line); transition: background .4s; }
.nl-field canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

@media (min-width: 901px) {
  .nl-ob { display: block; position: relative; --cl: 48px; height: 100dvh; min-height: 640px; }
  .nl-field { position: absolute; inset: 0; border-bottom: 0; }
  .nl-pane { position: absolute; top: 50%; transform: translateY(-50%); height: min(820px, calc(100dvh - 64px)); left: var(--cl); width: 520px; border: 1px solid var(--nl-line2); border-radius: 26px; overflow: hidden;
    background: color-mix(in srgb, var(--nl-pane) 90%, transparent); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); box-shadow: var(--nl-shadow), inset 0 1px 0 rgba(255,255,255,.04); }
  .nl-top { padding: 22px 32px; }
  .nl-main { padding: 0 32px 4vh; }
  .nl-foot { padding: 18px 32px 22px; }
  .nl-h1 { font-size: clamp(34px, 3.2vw, 46px); }
  .nl-top { position: static; grid-row: 1; }
}
@media (min-width: 1600px) { .nl-ob { --cw: min(1680px, calc(100vw - 96px)); --cl: calc((100vw - var(--cw)) / 2); } }
@media (min-width: 901px) and (max-height: 760px) {
  .nl-top { padding-top: 16px; padding-bottom: 8px; } .nl-h1 { font-size: 34px; margin: 12px 0 8px; } .nl-lede { display: none; } .nl-block { margin-top: 16px; gap: 8px; }
  .nl-sso, .nl-input { height: 46px; } .nl-foot { padding-top: 12px; padding-bottom: 14px; }
}
@media (max-width: 900px) {
  .nl-top { position: absolute; top: -22vh; left: 0; right: 0; padding: 14px 16px; z-index: 4; }
}
@media (prefers-reduced-motion: reduce) { .nl-main > * { animation: none !important; } .nl-sso:hover { transform: none; } .nl-btn-label span, .nl-btn-arrow svg { transition: none; } }

/* Sign-up (register). Checkbox rows and notices; the rest reuses the sign-in pieces. */
.nl-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--nl-text2); cursor: pointer; }
.nl-check input { margin-top: 3px; width: 16px; height: 16px; flex: none; accent-color: var(--nl-ember); }
.nl-check a { color: var(--nl-text); text-decoration: underline; text-underline-offset: 2px; }
.nl-check.bad { color: var(--nl-bad); }
.nl-note-box { border: 1px solid var(--nl-ember-line); background: var(--nl-ember-soft); border-radius: 12px; padding: 10px 14px; font-size: 13px; line-height: 1.5; color: var(--nl-text2); margin: 0; }
.nl-note-box b { color: var(--nl-text); font-weight: 600; }
.nl-extra { display: grid; gap: 10px; margin-top: 10px; }
.nl-extra[hidden] { display: none; }
/* The sign-up card grows when the extra fields open: centre while it fits, scroll inside the card when it does not.
   Only the register screen (it renders a hidden .nl-reg marker); the other auth screens keep the plain .nl-main. */
.nl-main:has(> .nl-reg) { justify-content: safe center; overflow-y: auto; }
.nl-reg { display: none; }
.nl-beta { display: inline-flex; align-items: center; flex: none; font: 500 9.5px/1 var(--nl-mono); letter-spacing: .1em; padding: 3px 6px; border-radius: 999px; border: 1px solid var(--nl-ember-line); color: var(--nl-ember); background: transparent; cursor: default; }
/* nl-cta:start (generated by scripts/new-look-cta.py, edit scripts/new-look-cta.css) */
/* The dot-W call to action on every orange button of the new look (the mockup's .w-btn.primary, shared/chrome.css, without the label
   roll and dot arrow, which need markup the old components do not have). Template: scripts/new-look-cta.py replaces :is(html:not(#nl) .nl-btn, html:not(#nl) .nl-auth .nl-wiz .ink-btn, html:not(#nl) .gp-tile.pri) and writes
   the result between the nl-cta markers of public/new-look/app.css and auth.css. Layers: the button's own background = resting dots,
   ::before = lit dots, revealed left to right by --wb-s. The lit layer sits at z-index -1 inside the button's own stacking context
   (isolation), so it paints over the ember and under the label and icon: contrast of the text never changes.
   Hover is for real pointers only; keyboard focus lights it too; touch gets the press surge only; reduced motion is static. */
@property --wb-s { syntax: "<percentage>"; initial-value: 0%; inherits: true; }
:is(html:not(#nl) .nl-btn, html:not(#nl) .nl-auth .nl-wiz .ink-btn, html:not(#nl) .gp-tile.pri) {
  --wb-p: 5px; --wb-r: 1.1px; --wb-s: 0%; --wb-on: 1;
  --wb-dot: radial-gradient(circle at 50% 50%, #000 calc(var(--wb-r) - .4px), transparent calc(var(--wb-r) + .4px));
  --wb-lit: radial-gradient(56px 34px at var(--bx, 78%) var(--by, 50%), rgba(255,255,255,.9), transparent 80%), linear-gradient(90deg, rgba(255,255,255,.1), rgba(255,236,222,.36) 45%, rgba(255,247,240,.72));
  position: relative; isolation: isolate; overflow: hidden; -webkit-tap-highlight-color: transparent;
  background-image: radial-gradient(circle at 50% 50%, color-mix(in srgb, currentColor 16%, transparent) calc(var(--wb-r) - .4px), transparent calc(var(--wb-r) + .4px));
  background-size: var(--wb-p) var(--wb-p); background-position: 50% 50%; background-repeat: repeat;
  transition: background-color .15s, border-color .15s, transform .5s cubic-bezier(.34,1.56,.64,1), box-shadow .4s cubic-bezier(.2,.8,.2,1), --wb-s 0s .45s;
}
:is(html:not(#nl) .nl-btn, html:not(#nl) .nl-auth .nl-wiz .ink-btn, html:not(#nl) .gp-tile.pri)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; background: var(--wb-lit);
  -webkit-mask: var(--wb-dot) 50% 50% / var(--wb-p) var(--wb-p), linear-gradient(90deg, #000 calc(var(--wb-s) - 16%), transparent var(--wb-s)) 0 0 / 100% 100% no-repeat, linear-gradient(180deg, #000, rgba(0,0,0,.38) 32%, rgba(0,0,0,.38) 68%, #000) 0 0 / 100% 100% no-repeat;
  mask: var(--wb-dot) 50% 50% / var(--wb-p) var(--wb-p), linear-gradient(90deg, #000 calc(var(--wb-s) - 16%), transparent var(--wb-s)) 0 0 / 100% 100% no-repeat, linear-gradient(180deg, #000, rgba(0,0,0,.38) 32%, rgba(0,0,0,.38) 68%, #000) 0 0 / 100% 100% no-repeat;
  -webkit-mask-composite: source-in; mask-composite: intersect; transition: opacity .45s cubic-bezier(.2,.8,.2,1);
}
@media (hover: hover) {
  :is(html:not(#nl) .nl-btn, html:not(#nl) .nl-auth .nl-wiz .ink-btn, html:not(#nl) .gp-tile.pri):hover:not(:disabled):not([aria-disabled="true"]) { --wb-s: 116%; transition: background-color .15s, border-color .15s, transform .5s cubic-bezier(.34,1.56,.64,1), box-shadow .4s cubic-bezier(.2,.8,.2,1), --wb-s .62s cubic-bezier(.3,.6,.3,1); box-shadow: 0 10px 26px -12px rgba(255,90,31,.8), inset 0 1px 0 rgba(255,255,255,.25); }
  :is(html:not(#nl) .nl-btn, html:not(#nl) .nl-auth .nl-wiz .ink-btn, html:not(#nl) .gp-tile.pri):hover:not(:disabled):not([aria-disabled="true"])::before { opacity: var(--wb-on); transition: opacity .12s; }
}
:is(html:not(#nl) .nl-btn, html:not(#nl) .nl-auth .nl-wiz .ink-btn, html:not(#nl) .gp-tile.pri):focus-visible:not(:disabled) { --wb-s: 116%; transition: background-color .15s, border-color .15s, transform .5s cubic-bezier(.34,1.56,.64,1), box-shadow .4s cubic-bezier(.2,.8,.2,1), --wb-s .62s cubic-bezier(.3,.6,.3,1); outline: 2px solid var(--nl-ember); outline-offset: 3px; }
:is(html:not(#nl) .nl-btn, html:not(#nl) .nl-auth .nl-wiz .ink-btn, html:not(#nl) .gp-tile.pri):focus-visible:not(:disabled)::before { opacity: var(--wb-on); transition: opacity .12s; }
:is(html:not(#nl) .nl-btn, html:not(#nl) .nl-auth .nl-wiz .ink-btn, html:not(#nl) .gp-tile.pri):active:not(:disabled):not([aria-disabled="true"]) { --wb-s: 130%; --wb-r: 1.6px; transform: scale(.97); transition: transform .12s cubic-bezier(.2,.8,.2,1), box-shadow .12s, --wb-s 0s; }
:is(html:not(#nl) .nl-btn, html:not(#nl) .nl-auth .nl-wiz .ink-btn, html:not(#nl) .gp-tile.pri):active:not(:disabled):not([aria-disabled="true"])::before { opacity: 1; filter: brightness(1.12) saturate(1.15); transition: opacity 0s; }
:is(html:not(#nl) .nl-btn, html:not(#nl) .nl-auth .nl-wiz .ink-btn, html:not(#nl) .gp-tile.pri):disabled::before, :is(html:not(#nl) .nl-btn, html:not(#nl) .nl-auth .nl-wiz .ink-btn, html:not(#nl) .gp-tile.pri)[aria-disabled="true"]::before { display: none; }
@media (prefers-reduced-motion: reduce) {
  :is(html:not(#nl) .nl-btn, html:not(#nl) .nl-auth .nl-wiz .ink-btn, html:not(#nl) .gp-tile.pri), :is(html:not(#nl) .nl-btn, html:not(#nl) .nl-auth .nl-wiz .ink-btn, html:not(#nl) .gp-tile.pri)::before { transition: none !important; }
  :is(html:not(#nl) .nl-btn, html:not(#nl) .nl-auth .nl-wiz .ink-btn, html:not(#nl) .gp-tile.pri):hover:not(:disabled):not([aria-disabled="true"])::before, :is(html:not(#nl) .nl-btn, html:not(#nl) .nl-auth .nl-wiz .ink-btn, html:not(#nl) .gp-tile.pri):focus-visible:not(:disabled)::before, :is(html:not(#nl) .nl-btn, html:not(#nl) .nl-auth .nl-wiz .ink-btn, html:not(#nl) .gp-tile.pri):active:not(:disabled):not([aria-disabled="true"])::before { opacity: 0; }
  :is(html:not(#nl) .nl-btn, html:not(#nl) .nl-auth .nl-wiz .ink-btn, html:not(#nl) .gp-tile.pri):active:not(:disabled):not([aria-disabled="true"]) { transform: none; }
}
/* nl-cta:end */

/* Phone: while the cookie card is up it sits over the bottom of the form (the page did not scroll, so "Set new password" and similar buttons were stuck underneath). Give the form room to scroll above it. CSS only; the consent card itself is untouched. */
@media (max-width: 700px) { body:has(.cookie-consent-card:not(.cookie-consent-slim)) .nl-ob main { padding-bottom: 210px; } }

/* Sign-in button: a light sweeps across it every few seconds, the glow breathes, it lifts on hover and the arrow leads the way */
.nl-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.55) 48%, rgba(255,255,255,.12) 55%, transparent 70%); transform: translateX(-130%); animation: nl-btn-sheen 4.2s ease-in-out 1.4s infinite; }
.nl-btn:not(:disabled) { animation: nl-btn-glow 3.2s ease-in-out infinite; }
.nl-btn:hover:not(:disabled) { transform: translateY(-2px); }
.nl-btn:hover:not(:disabled)::before { animation-duration: 1.6s; animation-delay: 0s; }
.nl-btn:hover:not(:disabled) .nl-btn-arrow { transform: translateX(3px); }
.nl-btn-arrow { transition: transform .4s var(--nl-ease); }
.nl-btn:focus-visible { outline: 3px solid var(--nl-ring); outline-offset: 3px; }
@keyframes nl-btn-sheen { 0%, 52% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
@keyframes nl-btn-glow { 50% { box-shadow: 0 12px 34px -8px rgba(255,90,31,.95), inset 0 1px 0 rgba(255,255,255,.32); } }
@media (prefers-reduced-motion: reduce) { .nl-btn::before { animation: none; opacity: 0; } .nl-btn:not(:disabled) { animation: none; } .nl-btn:hover:not(:disabled) { transform: none; } }

/* Browser autofill paints its own pale blue over the field and leaves the Show button a different colour: keep one field, in our colours */
.nl-input input:-webkit-autofill, .nl-input input:-webkit-autofill:hover, .nl-input input:-webkit-autofill:focus, .nl-input input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--nl-panel2) inset; box-shadow: 0 0 0 1000px var(--nl-panel2) inset; -webkit-text-fill-color: var(--nl-text); caret-color: var(--nl-ember); transition: background-color 600000s 0s; }
.nl-input:focus-within input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--nl-panel) inset; box-shadow: 0 0 0 1000px var(--nl-panel) inset; }