/* Proweb Design Webmail — Copyright (c) 2026 Proweb Design. All rights reserved. */
.guest-page { background: #0e1522; }
.guest-shell { display: grid; min-height: 100vh; grid-template-columns: minmax(360px, 1.08fr) minmax(440px, .92fr); }
.brand-panel { position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: clamp(38px, 6vw, 84px); color: #fff; background: radial-gradient(circle at 20% 20%, rgba(119, 120, 245, .35), transparent 36%), radial-gradient(circle at 88% 76%, rgba(65, 178, 188, .18), transparent 30%), linear-gradient(145deg, #171d31 0%, #0f1522 75%); }
.brand-panel::after { position: absolute; right: -120px; bottom: -170px; width: 420px; height: 420px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; box-shadow: 0 0 0 60px rgba(255,255,255,.02), 0 0 0 120px rgba(255,255,255,.015); content: ""; }
.brand-panel .brand-mark { position: relative; z-index: 1; }
.brand-panel .brand-mark small { color: rgba(255,255,255,.55); }
.brand-copy { position: relative; z-index: 1; max-width: 620px; margin: auto 0; padding: 80px 0; }
.brand-copy h1 { margin-bottom: 24px; font-size: clamp(46px, 5.7vw, 82px); line-height: .98; }
.brand-copy p { max-width: 570px; margin: 0; color: rgba(255,255,255,.65); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.7; }
.brand-panel .eyebrow { color: #a9aafc; }
.feature-list { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 0; padding: 0; color: rgba(255,255,255,.6); list-style: none; font-size: 13px; }
.feature-list li::before { margin-right: 8px; color: #8ce0c3; content: "✓"; }
.security-note { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; color: rgba(255,255,255,.55); font-size: 13px; }
.security-note span { display: grid; width: 24px; height: 24px; place-items: center; color: #8ce0c3; background: rgba(140,224,195,.09); border-radius: 8px; }
.guest-card { display: flex; width: min(100%, 620px); min-height: 100vh; flex-direction: column; justify-content: center; padding: clamp(42px, 7vw, 96px); background: var(--surface); }
.guest-card h2 { margin-bottom: 10px; font-size: clamp(30px, 3vw, 42px); letter-spacing: -.04em; }
.guest-card > .muted { margin-bottom: 26px; }
/* v.405: "legg også inn en innstilling der en kan stille farge, uppercase og tekststørrelse på
   disse 2 elementene" -- scoped to .login-card specifically (not the broader .guest-card, which
   admin/mfa.php also uses for its own, unrelated heading/text) so this never reaches any other
   guest page. Each var(--x, <default>) fallback is today's exact existing value for that property
   -- an installation that has never set an override renders byte-identical to before this rule
   existed; auth/login.php/admin/login.php only ever emit the corresponding --login-form-* custom
   property when an override is actually set (see their own docblocks). */
.login-card h2 { color: var(--login-form-heading-color, inherit); font-size: var(--login-form-heading-size, clamp(30px, 3vw, 42px)); text-transform: var(--login-form-heading-case, none); }
.login-card > .muted { color: var(--login-form-text-color, var(--muted)); font-size: var(--login-form-text-size, inherit); text-transform: var(--login-form-text-case, none); }
.login-card { width: 100%; max-width: none; }
.login-card form { max-width: 440px; }
.login-divider { display: flex; align-items: center; gap: 14px; max-width: 440px; margin: 22px 0; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.login-divider::before, .login-divider::after { flex: 1; height: 1px; content: ""; background: var(--line); }
.installer-card { width: 100%; max-width: none; justify-content: flex-start; overflow: auto; }
.installer-card > * { width: min(100%, 560px); margin-left: auto; margin-right: auto; }
.step-label { margin-bottom: 18px; color: var(--primary); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.fine-print { margin-top: 18px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.mobile-brand { display: none; margin-bottom: 44px; }
.guest-footer { display: flex; justify-content: center; gap: 10px; margin-top: 20px; color: var(--muted); font-size: 12px; }
.system-page { min-height: 100vh; padding: 28px; }
.system-header { display: flex; max-width: 960px; align-items: center; justify-content: space-between; margin: 0 auto 24px; }
.system-card { max-width: 960px; margin: 0 auto; padding: 40px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.requirements.large .requirement-row { padding: 14px 16px; }

@media (max-width: 900px) {
  .guest-shell { grid-template-columns: 1fr; background: var(--surface); }
  .brand-panel { display: none; }
  .guest-card { width: 100%; min-height: 100vh; padding: 34px 24px; }
  .login-card { justify-content: center; }
  .mobile-brand { display: inline-flex; }
}

@media (max-width: 520px) {
  .form-grid { grid-template-columns: 1fr; }
  .system-page { padding: 14px; }
  .system-card { padding: 24px; }
}
.installer-form { padding-bottom: 40px; }
.installer-proof { padding-bottom: 40px; }
.installer-proof fieldset > p { margin: 0 0 16px; color: var(--muted); line-height: 1.6; }
.install-proof-path { display: grid; gap: 7px; margin-bottom: 16px; font-size: 13px; }
.install-proof-path code { overflow-wrap: anywhere; padding: 10px 12px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 8px; }
.install-proof-path small { color: var(--muted); }
.installer-proof > form, .installer-proof > form .button { width: 100%; margin: 0; }
.system-header > div { display: flex; gap: 10px; }
.admin-brand-panel { background: radial-gradient(circle at 16% 15%, rgba(49,87,213,.42), transparent 35%), linear-gradient(145deg, #10182a, #090e17); }
@media (max-width: 520px) { .system-header { align-items: flex-start; gap: 16px; flex-direction: column; } .system-header > div { width: 100%; } .system-header .button { flex: 1; } }

/* v.376: "det kan se ut som du må legge til ingen repeat" -- background-repeat was never set here,
   so the CSS default (repeat) let the image visibly tile whenever background-size left empty space
   (any 'contain' choice, or a custom zoom percentage below 100% -- see login_gallery_size_percent
   below). No legitimate case ever wants a tiled login background/gallery image, so this is a
   straight root-cause fix, not a new setting. */
.login-shell.has-custom-background .brand-panel { background-image: linear-gradient(var(--login-overlay-color),var(--login-overlay-color)),var(--login-background); background-position:var(--login-background-position,center); background-size:var(--login-background-size,cover); background-repeat:no-repeat; }
/* v.354 (fase 4): scaled off login_logo_size (a unitless percent number, default 100) rather than
   a fixed px size -- calc() with a plain var() number is valid CSS, no unit needed on the variable
   itself since the multiplication supplies it. */
.brand-logo-image { display:block; max-width:calc(220px * var(--login-logo-size,100) / 100); max-height:calc(72px * var(--login-logo-size,100) / 100); object-fit:contain; }
.login-language { display:flex; justify-content:center; margin-top:8px; margin-bottom:0; }
.login-language form { max-width:220px; }
.login-language label { color:var(--muted); font-size:12px; }
.login-language select { height:38px; margin-top:5px; }

.logout-maintenance-shell{display:grid;place-items:center;min-height:100vh;padding:24px}.logout-maintenance-card{width:min(620px,100%);padding:32px}.logout-maintenance-list{display:grid;gap:10px;margin:20px 0;padding-left:22px}.logout-maintenance-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:24px}.logout-maintenance-actions form{margin:0}


/* dev.5.7.58 optional showcase sign-in */
.login-shell{position:relative;isolation:isolate;overflow:hidden}
.login-shell>.brand-panel,.login-shell>.guest-card{position:relative;z-index:2}
.login-backgrounds{position:absolute;z-index:0;inset:0 46% 0 0;overflow:hidden;background:#101725;perspective:1600px}
/* v.353 (fase 3): the overlay moved from a single shared .login-backgrounds::after (one constant
   dim over the WHOLE container, regardless of which slide is active) to each .login-background's
   own ::before -- required so a per-image overlay override actually differs per slide. Its own
   opacity/transform never need setting: as a normal child box of .login-background it already
   fades/transforms together with that slide (inactive slides sit at opacity:0), so the untouched
   default case (no image ever sets --login-slide-overlay-color) renders the exact same overlay
   colour statically visible as the old shared ::after did -- see that var()'s own fallback chain. */
/* v.372: "tiden for effektovergangene" -- --login-transition-speed (auth/login.php, a ratio
   against this rule's own base .8s/1.1s, so an unset value defaults to 1 = today's unchanged
   speed) scales EVERY effect's own duration below via the same calc(<original>s * var(...))
   pattern -- one setting, not 16. */
/* v.375: "det burde vært flere muligheter på å velge contain, cover eller beskjæring" --
   --login-slide-size (a per-image override, auth/login.php's own $slideExtraCss()) now falls back
   to --login-background-size (the installation-wide login_background_size) exactly like
   --login-slide-position already does above it, same fallback-chain convention. */
.login-background{position:absolute;inset:-2%;background-image:var(--login-slide-image);background-position:var(--login-slide-position,var(--login-background-position,center));background-size:var(--login-slide-size,var(--login-background-size,cover));background-repeat:no-repeat;filter:var(--login-slide-filter,none);opacity:0;transform:scale(1.025);transition:opacity calc(.8s * var(--login-transition-speed,1)) ease,transform calc(1.1s * var(--login-transition-speed,1)) ease}
.login-background::before{position:absolute;inset:0;background:var(--login-slide-overlay-color,var(--login-overlay-color,rgba(16,23,37,.28)));content:"";pointer-events:none}
.login-background.is-active{z-index:1;opacity:1;transform:scale(1)}
/* v.375: "velge overgangene både når bilder slider inn og der bilder slider ut" -- entry and exit
   are now two INDEPENDENT class dimensions on .login-shell (effect-in-X / effect-out-Y, any
   combination), not one .effect-X governing both ends of every transition. .effect-in-X still
   covers exactly what it always did: a slide's own RESTING (not-yet-entered) look, and its
   .is-active (entering) target -- values below are byte-for-byte unchanged from before this
   split, just under a renamed selector, so a slide waiting its turn always looks right whichever
   effect it's about to enter WITH. .effect-out-Y is new: the .was-active (just-exited) target for
   EVERY effect, not only the four slides (which alone had a distinct "push further away"
   .was-active before -- the other eleven simply fell back to their own shared resting rule, which
   doesn't work anymore now that resting and exiting can belong to two DIFFERENT effects). Each
   .effect-out-Y rule below is fully self-contained (opacity + transform + clip-path all always
   set, never left to inherit) specifically so it can never be contaminated by whatever
   .effect-in-X resting rule happens to be active alongside it -- both are equally-specific
   (.login-background.was-active has one extra class over plain .login-background, so it always
   wins regardless of which effect-in-X is present). Choosing the SAME effect for both in and out
   reproduces today's exact pre-v.375 look: every .effect-out-Y value below is that same effect's
   own former shared resting/away state. */
/* 'fade' has no effect-in-fade rule at all (never did -- it relies entirely on the generic
   .login-background/.login-background.is-active defaults just above), but DOES need an explicit
   effect-out-fade rule: without one, a was-active element would otherwise still match whatever
   OTHER effect-in-X resting rule happens to be active alongside it (both are .login-background
   descendant selectors of equal specificity), incorrectly inheriting that effect's own transform/
   clip-path instead of cleanly fading in place. */
.login-shell.effect-out-fade .login-background.was-active{opacity:0;transform:none;clip-path:none}
.login-shell.effect-in-slide .login-background{opacity:1;transform:translateX(102%)}
.login-shell.effect-in-slide .login-background.is-active{transform:translateX(0)}
.login-shell.effect-out-slide .login-background.was-active{opacity:1;transform:translateX(-102%);clip-path:none}
/* v.363: "lag flere fine valg for overganger på bildefremvisningen" -- 12 more transition styles,
   all driven by the exact same is-active/was-active class toggling login-presentation.js already
   does every interval; only the CSS differs per effect here. Three direction siblings of
   effect-(in|out)-slide above (right/up/down instead of left). */
.login-shell.effect-in-slide_right .login-background{opacity:1;transform:translateX(-102%)}
.login-shell.effect-in-slide_right .login-background.is-active{transform:translateX(0)}
.login-shell.effect-out-slide_right .login-background.was-active{opacity:1;transform:translateX(102%);clip-path:none}
.login-shell.effect-in-slide_up .login-background{opacity:1;transform:translateY(102%)}
.login-shell.effect-in-slide_up .login-background.is-active{transform:translateY(0)}
.login-shell.effect-out-slide_up .login-background.was-active{opacity:1;transform:translateY(-102%);clip-path:none}
.login-shell.effect-in-slide_down .login-background{opacity:1;transform:translateY(-102%)}
.login-shell.effect-in-slide_down .login-background.is-active{transform:translateY(0)}
.login-shell.effect-out-slide_down .login-background.was-active{opacity:1;transform:translateY(102%);clip-path:none}
.login-shell.effect-in-zoom_in .login-background{transform:scale(.88)}
.login-shell.effect-in-zoom_in .login-background.is-active{transform:scale(1)}
.login-shell.effect-out-zoom_in .login-background.was-active{opacity:0;transform:scale(.88);clip-path:none}
.login-shell.effect-in-zoom_out .login-background{transform:scale(1.18)}
.login-shell.effect-in-zoom_out .login-background.is-active{transform:scale(1)}
.login-shell.effect-out-zoom_out .login-background.was-active{opacity:0;transform:scale(1.18);clip-path:none}
.login-shell.effect-in-rotate .login-background{transform:scale(1.04) rotate(-4deg)}
.login-shell.effect-in-rotate .login-background.is-active{transform:scale(1) rotate(0deg)}
.login-shell.effect-out-rotate .login-background.was-active{opacity:0;transform:scale(1.04) rotate(-4deg);clip-path:none}
.login-shell.effect-in-skew .login-background{transform:scale(1.06) skewX(-6deg)}
.login-shell.effect-in-skew .login-background.is-active{transform:scale(1) skewX(0deg)}
.login-shell.effect-out-skew .login-background.was-active{opacity:0;transform:scale(1.06) skewX(-6deg);clip-path:none}
.login-shell.effect-in-flip .login-background{transform:rotateY(85deg)}
.login-shell.effect-in-flip .login-background.is-active{transform:rotateY(0deg)}
.login-shell.effect-out-flip .login-background.was-active{opacity:0;transform:rotateY(85deg);clip-path:none}
.login-shell.effect-in-diagonal .login-background{transform:scale(1.06) translate(6%,6%)}
.login-shell.effect-in-diagonal .login-background.is-active{transform:scale(1) translate(0,0)}
.login-shell.effect-out-diagonal .login-background.was-active{opacity:0;transform:scale(1.06) translate(6%,6%);clip-path:none}
.login-shell.effect-in-bounce .login-background{transform:translateY(40px) scale(.97);transition:opacity calc(.7s * var(--login-transition-speed,1)) ease,transform calc(.9s * var(--login-transition-speed,1)) cubic-bezier(.34,1.56,.64,1)}
.login-shell.effect-in-bounce .login-background.is-active{transform:translateY(0) scale(1)}
.login-shell.effect-out-bounce .login-background.was-active{opacity:0;transform:translateY(40px) scale(.97);clip-path:none;transition:opacity calc(.7s * var(--login-transition-speed,1)) ease,transform calc(.9s * var(--login-transition-speed,1)) cubic-bezier(.34,1.56,.64,1)}
/* wipe/iris use clip-path instead of opacity/transform -- always fully opaque and unscaled, the
   incoming slide's own z-index:1 (set by the shared .is-active rule above) simply reveals more of
   itself over the outgoing one underneath as its clip shrinks toward nothing. circle()'s percentage
   radius resolves against sqrt((w²+h²)/2), so 150% comfortably covers the box at any aspect ratio. */
.login-shell.effect-in-wipe .login-background{opacity:1;transform:none;clip-path:inset(0 100% 0 0);transition:clip-path calc(.9s * var(--login-transition-speed,1)) ease}
.login-shell.effect-in-wipe .login-background.is-active{clip-path:inset(0 0 0 0)}
.login-shell.effect-out-wipe .login-background.was-active{opacity:1;transform:none;clip-path:inset(0 100% 0 0);transition:clip-path calc(.9s * var(--login-transition-speed,1)) ease}
.login-shell.effect-in-iris .login-background{opacity:1;transform:none;clip-path:circle(0% at 50% 50%);transition:clip-path calc(1s * var(--login-transition-speed,1)) ease}
.login-shell.effect-in-iris .login-background.is-active{clip-path:circle(150% at 50% 50%)}
.login-shell.effect-out-iris .login-background.was-active{opacity:1;transform:none;clip-path:circle(0% at 50% 50%);transition:clip-path calc(1s * var(--login-transition-speed,1)) ease}
.login-shell.has-custom-background .brand-panel{background:transparent}
.login-presentation-toggle{min-height:38px;padding:0 12px;color:var(--text);background:var(--surface-soft);border:1px solid var(--line);border-radius:10px;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
/* v.391: "en lydfil der en kan velge at den skal avspille på innloggingsiden" -- direct child of
   .login-shell (auth/login.php, sibling of .login-backgrounds/.login-snowfall, not inside either
   presentation column), so a fixed position here sits correctly above every presentation mode
   (split/showcase/modal) without needing a per-mode override. Hidden by default -- login-audio.js
   only reveals it once the browser has actually blocked the automatic play() attempt, so a
   successful autoplay never shows an extra control nobody asked for. */
.login-audio-toggle{position:fixed;z-index:5;right:20px;bottom:20px;display:grid;width:44px;height:44px;place-items:center;color:var(--login-button-color,#e60057);background:var(--surface,#fff);border:1px solid var(--line,rgba(0,0,0,.1));border-radius:999px;box-shadow:0 10px 30px rgba(15,23,42,.22);cursor:pointer}
.login-audio-toggle svg{width:20px;height:20px}
.login-audio-toggle[aria-pressed="false"]{opacity:.7}
.login-language{align-items:center;gap:10px}
.login-shell.button-square .button-primary{border-radius:2px}
.login-shell.button-rounded .button-primary{border-radius:12px}
.login-shell.button-pill .button-primary{border-radius:999px}
.login-shell .login-card .button-primary{background:var(--login-button-color,#e60057);border-color:var(--login-button-color,#e60057)}
.login-shell.presentation-showcase{display:grid;min-height:100vh;grid-template-columns:1fr;place-items:center;padding:clamp(18px,4vw,60px)}
.login-shell.presentation-showcase .login-backgrounds{position:absolute;inset:0}
.login-shell.presentation-showcase>.brand-panel{display:none}
.login-shell.presentation-showcase>.login-card{width:min(100%,var(--login-showcase-card-width,480px));min-height:var(--login-showcase-card-height,0px);padding:clamp(20px,3.2vw,36px);background:color-mix(in srgb,var(--login-card-background,#fff) calc(var(--login-card-opacity,.96)*100%),transparent);border:1px solid rgba(255,255,255,.35);border-radius:24px;box-shadow:0 30px 80px rgba(5,10,24,.38);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.login-shell.presentation-showcase .mobile-brand{display:inline-flex;width:100%;justify-content:center;margin-bottom:24px}
.login-shell.presentation-showcase .login-language form{max-width:190px}
.login-shell.presentation-showcase .guest-footer{flex-wrap:wrap}
.login-shell.presentation-showcase>.login-card .eyebrow,.login-shell.presentation-showcase>.login-card h2,.login-shell.presentation-showcase>.login-card>.muted{text-align:center}
@media(max-width:900px){.login-backgrounds{inset:0}.login-shell.presentation-split .login-backgrounds{display:none}.login-shell.presentation-showcase{padding:18px}.login-shell.presentation-showcase>.login-card{min-height:var(--login-showcase-card-height,0px);border-radius:20px}}
@media(prefers-reduced-motion:reduce){
  .login-background{transition:none!important}
  /* v.363: every new effect-in-X above shares the same reduced-motion concern effect-in-slide
     already had -- their own resting (non-active) state is fully opaque/unclipped-relative and
     only kept out of view by an off-position transform or a near-zero clip-path; collapsing that
     back to none/unclipped guarantees the correct (is-active, z-index:1) slide still fully covers
     the others, whatever their own leftover state happens to be, with zero animated motion.
     v.375: the same now also applies to every effect-out-Y's own .was-active target, split into
     its own selector list since it needs the extra .was-active class to match at all. */
  .login-shell.effect-in-slide .login-background,.login-shell.effect-in-slide_right .login-background,.login-shell.effect-in-slide_up .login-background,.login-shell.effect-in-slide_down .login-background,.login-shell.effect-in-zoom_in .login-background,.login-shell.effect-in-zoom_out .login-background,.login-shell.effect-in-rotate .login-background,.login-shell.effect-in-skew .login-background,.login-shell.effect-in-flip .login-background,.login-shell.effect-in-diagonal .login-background,.login-shell.effect-in-bounce .login-background{transform:none!important}
  .login-shell.effect-in-wipe .login-background,.login-shell.effect-in-iris .login-background{clip-path:none!important}
  .login-shell.effect-out-slide .login-background.was-active,.login-shell.effect-out-slide_right .login-background.was-active,.login-shell.effect-out-slide_up .login-background.was-active,.login-shell.effect-out-slide_down .login-background.was-active,.login-shell.effect-out-zoom_in .login-background.was-active,.login-shell.effect-out-zoom_out .login-background.was-active,.login-shell.effect-out-rotate .login-background.was-active,.login-shell.effect-out-skew .login-background.was-active,.login-shell.effect-out-flip .login-background.was-active,.login-shell.effect-out-diagonal .login-background.was-active,.login-shell.effect-out-bounce .login-background.was-active{transform:none!important}
  .login-shell.effect-out-wipe .login-background.was-active,.login-shell.effect-out-iris .login-background.was-active{clip-path:none!important}
}

/* dev.5.7.329 "modal" sign-in presentation: same full-bleed background as showcase, but the card
   itself is a genuine modal dialog -- bigger, rounder, a stronger shadow, and it fades/scales in on
   load instead of simply being present, so it reads as a window opening over the page rather than a
   static centered card. */
.login-shell.presentation-modal{display:grid;min-height:100vh;grid-template-columns:1fr;place-items:center;padding:clamp(18px,4vw,60px)}
.login-shell.presentation-modal .login-backgrounds{position:absolute;inset:0}
.login-shell.presentation-modal>.brand-panel{display:none}
.login-shell.presentation-modal>.login-card{width:min(100%,var(--login-modal-card-width,540px));min-height:var(--login-modal-card-height,0px);padding:clamp(24px,3.8vw,40px);background:color-mix(in srgb,var(--login-card-background,#fff) calc(var(--login-card-opacity,.96)*100%),transparent);border:1px solid rgba(255,255,255,.4);border-radius:28px;box-shadow:0 44px 110px rgba(5,10,24,.48),0 0 0 1px rgba(255,255,255,.06) inset;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);animation:login-modal-in .6s cubic-bezier(.16,1,.3,1) both}
.login-shell.presentation-modal .mobile-brand{display:inline-flex;width:100%;justify-content:center;margin-bottom:28px}
.login-shell.presentation-modal .login-language form{max-width:190px}
.login-shell.presentation-modal .guest-footer{flex-wrap:wrap}
.login-shell.presentation-modal>.login-card .eyebrow,.login-shell.presentation-modal>.login-card h2,.login-shell.presentation-modal>.login-card>.muted{text-align:center}
@keyframes login-modal-in{from{opacity:0;transform:translateY(22px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:900px){.login-shell.presentation-modal{padding:18px}.login-shell.presentation-modal>.login-card{min-height:var(--login-modal-card-height,0px);border-radius:22px}}
@media(prefers-reduced-motion:reduce){.login-shell.presentation-modal>.login-card{animation:none}}

/* v.374: "lag en effekt der det ser ut som ekte snøfall" -- pure-CSS falling-snow overlay, up to 250
   pre-authored <span> particles (auth/login.php emits exactly $snowfallDensity of them, clamped
   [10,250] as of v.394 (was [10,100] in v.376, [10,50] originally), only when $snowfall is true --
   no JS, no inline style="", CSP-compliant by construction). Each span's own position/size/base-
   speed/opacity/sway comes from the nth-child rules below via CSS custom properties, deterministic
   (not truly random) so the effect is reproducible and reviewable. Rendering fewer than 250 simply
   uses the first N of these 250 slots (nth-child selects by DOM position), so the DEFAULT density
   (30, nth-child 1-30, v.374's original set -- left completely unchanged below so upgrade behaviour
   stays byte-identical) looks exactly as it always has; nth-child 31-50 (v.375), 51-100 (v.376) and
   101-250 (v.394) only ever render once density is raised above 30/50/100 respectively. Sits as a
   direct child of .login-shell (inset:0 over the WHOLE shell, both
   brand-panel and card sides, in every presentation mode -- unlike .login-backgrounds, which is
   split-mode-only on the left column), above the background (.login-backgrounds is z-index:0) but
   below the card/brand content (.login-shell>.brand-panel,.login-shell>.guest-card are z-index:2)
   so it never sits over the readable areas, and pointer-events:none throughout so it can never
   block a click. v.375: "hastighet på snøen" -- --login-snowfall-speed (auth/login.php, a ratio
   against each flake's own authored --duration/--drift-duration, same calc()-multiplier pattern
   --login-transition-speed already uses for the slideshow) scales every flake's fall/sway speed
   together, one setting rather than 50 separate ones; an unset value defaults to 1 (unchanged).
   v.394: "legg til enda en innstilling der en kan velge størrelse på snøkorn" -- --login-snowfall-
   size, same calc()-multiplier pattern applied to each flake's own authored --size instead. */
.login-snowfall{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.login-snowfall span{position:absolute;top:-6%;left:var(--x);width:calc(var(--size) * var(--login-snowfall-size,1));height:calc(var(--size) * var(--login-snowfall-size,1));border-radius:50%;background:#fff;opacity:var(--opacity);box-shadow:0 0 4px rgba(255,255,255,.65);animation:login-snow-fall calc(var(--duration) * var(--login-snowfall-speed,1)) linear var(--delay) infinite,login-snow-drift calc(var(--drift-duration) * var(--login-snowfall-speed,1)) ease-in-out var(--delay) infinite alternate}
@keyframes login-snow-fall{to{transform:translateY(112vh)}}
@keyframes login-snow-drift{from{margin-left:-10px}to{margin-left:10px}}
.login-snowfall span:nth-child(1){--x:0.6%;--duration:9.3s;--delay:-2.6s;--size:2.7px;--opacity:0.82;--drift-duration:5.7s}
.login-snowfall span:nth-child(2){--x:5.0%;--duration:10s;--delay:-4.2s;--size:2.1px;--opacity:0.56;--drift-duration:5s}
.login-snowfall span:nth-child(3){--x:5.0%;--duration:11.2s;--delay:-7.3s;--size:3.6px;--opacity:0.56;--drift-duration:5.4s}
.login-snowfall span:nth-child(4){--x:11.6%;--duration:9.1s;--delay:-7.3s;--size:4.1px;--opacity:0.62;--drift-duration:3.6s}
.login-snowfall span:nth-child(5){--x:15.6%;--duration:12.7s;--delay:-1.2s;--size:2.3px;--opacity:0.87;--drift-duration:5.4s}
.login-snowfall span:nth-child(6){--x:18.5%;--duration:17s;--delay:-9.1s;--size:4.9px;--opacity:0.64;--drift-duration:5.2s}
.login-snowfall span:nth-child(7){--x:22%;--duration:15.8s;--delay:-13.6s;--size:3.7px;--opacity:0.8;--drift-duration:3.2s}
.login-snowfall span:nth-child(8){--x:23%;--duration:12.2s;--delay:-1s;--size:2.7px;--opacity:0.5;--drift-duration:4.1s}
.login-snowfall span:nth-child(9){--x:28.1%;--duration:13s;--delay:-4.8s;--size:2.6px;--opacity:0.58;--drift-duration:6.7s}
.login-snowfall span:nth-child(10){--x:31.6%;--duration:15.7s;--delay:-2.7s;--size:4.2px;--opacity:0.53;--drift-duration:4.5s}
.login-snowfall span:nth-child(11){--x:36.4%;--duration:16s;--delay:-8.9s;--size:4.1px;--opacity:0.87;--drift-duration:6.1s}
.login-snowfall span:nth-child(12){--x:36.8%;--duration:9.4s;--delay:-3s;--size:2.8px;--opacity:0.56;--drift-duration:6.8s}
.login-snowfall span:nth-child(13){--x:42.9%;--duration:12.5s;--delay:-8.2s;--size:3.2px;--opacity:0.91;--drift-duration:4.8s}
.login-snowfall span:nth-child(14){--x:43.9%;--duration:11.7s;--delay:-6.6s;--size:2.8px;--opacity:0.74;--drift-duration:6.6s}
.login-snowfall span:nth-child(15){--x:47.9%;--duration:11.4s;--delay:-11.4s;--size:3.5px;--opacity:0.5;--drift-duration:3.2s}
.login-snowfall span:nth-child(16){--x:50.2%;--duration:15.9s;--delay:-12.6s;--size:3.3px;--opacity:0.48;--drift-duration:4.5s}
.login-snowfall span:nth-child(17){--x:57.2%;--duration:14.8s;--delay:-14.4s;--size:4.6px;--opacity:0.46;--drift-duration:5.9s}
.login-snowfall span:nth-child(18){--x:59.3%;--duration:14.9s;--delay:-4s;--size:3.9px;--opacity:0.51;--drift-duration:4.7s}
.login-snowfall span:nth-child(19){--x:61.9%;--duration:19.5s;--delay:-17.1s;--size:2.8px;--opacity:0.7;--drift-duration:3.7s}
.login-snowfall span:nth-child(20){--x:67.2%;--duration:18.6s;--delay:-5.6s;--size:3.9px;--opacity:0.75;--drift-duration:3.6s}
.login-snowfall span:nth-child(21){--x:70%;--duration:14.9s;--delay:-11.6s;--size:3.6px;--opacity:0.45;--drift-duration:4.3s}
.login-snowfall span:nth-child(22){--x:70.5%;--duration:19.2s;--delay:-16.9s;--size:4.5px;--opacity:0.6;--drift-duration:3.2s}
.login-snowfall span:nth-child(23){--x:77.4%;--duration:19.4s;--delay:-1.7s;--size:3.5px;--opacity:0.48;--drift-duration:6s}
.login-snowfall span:nth-child(24){--x:80.4%;--duration:10.4s;--delay:-4.9s;--size:3.6px;--opacity:0.58;--drift-duration:6.5s}
.login-snowfall span:nth-child(25){--x:82.5%;--duration:11.3s;--delay:-6.1s;--size:4.2px;--opacity:0.55;--drift-duration:4.2s}
.login-snowfall span:nth-child(26){--x:88.2%;--duration:16.1s;--delay:-7.1s;--size:3.6px;--opacity:0.51;--drift-duration:3.9s}
.login-snowfall span:nth-child(27){--x:89%;--duration:15.5s;--delay:-3.6s;--size:2.7px;--opacity:0.49;--drift-duration:5.5s}
.login-snowfall span:nth-child(28){--x:92%;--duration:19s;--delay:-16.3s;--size:2.2px;--opacity:0.57;--drift-duration:5.7s}
.login-snowfall span:nth-child(29){--x:95.4%;--duration:10.5s;--delay:-9.8s;--size:3.7px;--opacity:0.69;--drift-duration:6.1s}
.login-snowfall span:nth-child(30){--x:100%;--duration:11.1s;--delay:-1.1s;--size:3.3px;--opacity:0.66;--drift-duration:4.9s}
/* v.375: "hvor mange snøfall som skal dale ned" -- 20 more slots (density up to 50), only ever
   rendered when $snowfallDensity is raised above the default 30. */
.login-snowfall span:nth-child(31){--x:19.5%;--duration:17.9s;--delay:-6.7s;--size:4.5px;--opacity:0.85;--drift-duration:5.3s}
.login-snowfall span:nth-child(32){--x:55.8%;--duration:9.5s;--delay:-8.4s;--size:4.4px;--opacity:0.63;--drift-duration:3.3s}
.login-snowfall span:nth-child(33){--x:43.8%;--duration:16.4s;--delay:-13.5s;--size:2.7px;--opacity:0.6;--drift-duration:4s}
.login-snowfall span:nth-child(34){--x:41.2%;--duration:11.1s;--delay:-9.6s;--size:2.7px;--opacity:0.72;--drift-duration:3.3s}
.login-snowfall span:nth-child(35){--x:74.8%;--duration:10.2s;--delay:-.7s;--size:3.6px;--opacity:0.9;--drift-duration:5.5s}
.login-snowfall span:nth-child(36){--x:74.3%;--duration:14s;--delay:-13.7s;--size:2.7px;--opacity:0.46;--drift-duration:5.3s}
.login-snowfall span:nth-child(37){--x:50.7%;--duration:11.2s;--delay:-.9s;--size:3.8px;--opacity:0.57;--drift-duration:3.6s}
.login-snowfall span:nth-child(38){--x:97.9%;--duration:19.7s;--delay:-3.1s;--size:2px;--opacity:0.82;--drift-duration:4.9s}
.login-snowfall span:nth-child(39){--x:74.6%;--duration:9.5s;--delay:-8.8s;--size:4.2px;--opacity:0.89;--drift-duration:3.2s}
.login-snowfall span:nth-child(40){--x:53.1%;--duration:18.2s;--delay:-.9s;--size:4px;--opacity:0.72;--drift-duration:5.3s}
.login-snowfall span:nth-child(41){--x:54.8%;--duration:13.5s;--delay:-10.5s;--size:3.3px;--opacity:0.76;--drift-duration:6.1s}
.login-snowfall span:nth-child(42){--x:60.3%;--duration:12.1s;--delay:-10.7s;--size:5px;--opacity:0.57;--drift-duration:3.7s}
.login-snowfall span:nth-child(43){--x:29.5%;--duration:14.5s;--delay:-7.3s;--size:5px;--opacity:0.8;--drift-duration:5.3s}
.login-snowfall span:nth-child(44){--x:20.9%;--duration:14.3s;--delay:-12.6s;--size:3.7px;--opacity:0.46;--drift-duration:4.2s}
.login-snowfall span:nth-child(45){--x:4%;--duration:14.9s;--delay:-13.7s;--size:4.5px;--opacity:0.47;--drift-duration:6.5s}
.login-snowfall span:nth-child(46){--x:27%;--duration:19.1s;--delay:-7.1s;--size:4.2px;--opacity:0.71;--drift-duration:3.6s}
.login-snowfall span:nth-child(47){--x:50.3%;--duration:18.5s;--delay:-8.1s;--size:3.6px;--opacity:0.67;--drift-duration:6.8s}
.login-snowfall span:nth-child(48){--x:19.1%;--duration:14.2s;--delay:-11.1s;--size:4.5px;--opacity:0.64;--drift-duration:4.2s}
.login-snowfall span:nth-child(49){--x:88.2%;--duration:11.1s;--delay:-10.1s;--size:4.7px;--opacity:0.45;--drift-duration:4s}
.login-snowfall span:nth-child(50){--x:19.1%;--duration:11.8s;--delay:-7.3s;--size:4.3px;--opacity:0.69;--drift-duration:3.5s}
/* v.376: "Øk muliigheter for Mengde snøfall til maks 100" -- 50 more slots (density up to 100),
   only ever rendered when $snowfallDensity is raised above 50. */
.login-snowfall span:nth-child(51){--x:99.3%;--duration:9.8s;--delay:-4.8s;--size:4.6px;--opacity:0.85;--drift-duration:5.3s}
.login-snowfall span:nth-child(52){--x:59.8%;--duration:18.2s;--delay:-17.6s;--size:4.7px;--opacity:0.82;--drift-duration:5s}
.login-snowfall span:nth-child(53){--x:31.6%;--duration:16.2s;--delay:-16.2s;--size:4.3px;--opacity:0.83;--drift-duration:6.2s}
.login-snowfall span:nth-child(54){--x:42.1%;--duration:16.3s;--delay:-10.3s;--size:4px;--opacity:0.56;--drift-duration:3.9s}
.login-snowfall span:nth-child(55){--x:34.7%;--duration:18.2s;--delay:-5.4s;--size:3.1px;--opacity:0.89;--drift-duration:4.7s}
.login-snowfall span:nth-child(56){--x:65.9%;--duration:15.9s;--delay:-3.1s;--size:3.7px;--opacity:0.71;--drift-duration:5.6s}
.login-snowfall span:nth-child(57){--x:44.8%;--duration:15.9s;--delay:-3.1s;--size:4.6px;--opacity:0.53;--drift-duration:5.3s}
.login-snowfall span:nth-child(58){--x:73.9%;--duration:15s;--delay:-17.5s;--size:2.3px;--opacity:0.77;--drift-duration:4.9s}
.login-snowfall span:nth-child(59){--x:42.1%;--duration:14.5s;--delay:-16.3s;--size:2.3px;--opacity:0.65;--drift-duration:4.9s}
.login-snowfall span:nth-child(60){--x:24.3%;--duration:18.3s;--delay:-12.1s;--size:2.8px;--opacity:0.69;--drift-duration:5.9s}
.login-snowfall span:nth-child(61){--x:13.4%;--duration:12.5s;--delay:-11s;--size:4.3px;--opacity:0.5;--drift-duration:3.2s}
.login-snowfall span:nth-child(62){--x:42%;--duration:15.7s;--delay:-14.5s;--size:3.2px;--opacity:0.83;--drift-duration:4s}
.login-snowfall span:nth-child(63){--x:34.3%;--duration:10.3s;--delay:-9s;--size:3.6px;--opacity:0.56;--drift-duration:5s}
.login-snowfall span:nth-child(64){--x:61%;--duration:9.8s;--delay:-11.7s;--size:2.1px;--opacity:0.74;--drift-duration:3.3s}
.login-snowfall span:nth-child(65){--x:37%;--duration:17.2s;--delay:-17.7s;--size:2.7px;--opacity:0.88;--drift-duration:6.4s}
.login-snowfall span:nth-child(66){--x:85.9%;--duration:11.4s;--delay:-11.9s;--size:2px;--opacity:0.76;--drift-duration:3.4s}
.login-snowfall span:nth-child(67){--x:21.1%;--duration:14.9s;--delay:-3.6s;--size:2.2px;--opacity:0.46;--drift-duration:4.2s}
.login-snowfall span:nth-child(68){--x:68.5%;--duration:10.2s;--delay:-12.4s;--size:3.9px;--opacity:0.56;--drift-duration:3.4s}
.login-snowfall span:nth-child(69){--x:65.4%;--duration:13.2s;--delay:-14.5s;--size:2px;--opacity:0.61;--drift-duration:5.3s}
.login-snowfall span:nth-child(70){--x:58.8%;--duration:13.3s;--delay:-12.4s;--size:4.1px;--opacity:0.78;--drift-duration:5.5s}
.login-snowfall span:nth-child(71){--x:20.2%;--duration:14.3s;--delay:-2.9s;--size:4.5px;--opacity:0.65;--drift-duration:3.7s}
.login-snowfall span:nth-child(72){--x:87.4%;--duration:15.4s;--delay:-10.1s;--size:2.7px;--opacity:0.68;--drift-duration:5.6s}
.login-snowfall span:nth-child(73){--x:15.9%;--duration:11.1s;--delay:-9.4s;--size:2px;--opacity:0.65;--drift-duration:6.5s}
.login-snowfall span:nth-child(74){--x:47.8%;--duration:14s;--delay:-7.1s;--size:3.4px;--opacity:0.52;--drift-duration:3.1s}
.login-snowfall span:nth-child(75){--x:69.3%;--duration:15.8s;--delay:-12.5s;--size:4.5px;--opacity:0.56;--drift-duration:5.5s}
.login-snowfall span:nth-child(76){--x:50.9%;--duration:16.3s;--delay:-5.4s;--size:4.9px;--opacity:0.88;--drift-duration:3.3s}
.login-snowfall span:nth-child(77){--x:21.7%;--duration:12.1s;--delay:-1.4s;--size:2.6px;--opacity:0.67;--drift-duration:6.3s}
.login-snowfall span:nth-child(78){--x:75.5%;--duration:18.2s;--delay:-14.6s;--size:4.2px;--opacity:0.81;--drift-duration:5.4s}
.login-snowfall span:nth-child(79){--x:71%;--duration:17.3s;--delay:-1s;--size:2.9px;--opacity:0.84;--drift-duration:6.8s}
.login-snowfall span:nth-child(80){--x:3.1%;--duration:12.4s;--delay:-3.3s;--size:4.2px;--opacity:0.73;--drift-duration:5.8s}
.login-snowfall span:nth-child(81){--x:45.7%;--duration:19.9s;--delay:-3.2s;--size:2.1px;--opacity:0.7;--drift-duration:7s}
.login-snowfall span:nth-child(82){--x:25.4%;--duration:17.6s;--delay:-4.6s;--size:4.7px;--opacity:0.9;--drift-duration:5.2s}
.login-snowfall span:nth-child(83){--x:13.7%;--duration:10.3s;--delay:-17.2s;--size:4.5px;--opacity:0.54;--drift-duration:3.9s}
.login-snowfall span:nth-child(84){--x:78.3%;--duration:17.7s;--delay:-15.4s;--size:3px;--opacity:0.8;--drift-duration:4.6s}
.login-snowfall span:nth-child(85){--x:28.1%;--duration:17.2s;--delay:-7.8s;--size:4.1px;--opacity:0.48;--drift-duration:3.4s}
.login-snowfall span:nth-child(86){--x:26.5%;--duration:16s;--delay:-15.4s;--size:3.4px;--opacity:0.48;--drift-duration:4.6s}
.login-snowfall span:nth-child(87){--x:31.1%;--duration:10.9s;--delay:-4.4s;--size:4.4px;--opacity:0.56;--drift-duration:4.8s}
.login-snowfall span:nth-child(88){--x:54.7%;--duration:13.2s;--delay:-15.6s;--size:4.9px;--opacity:0.66;--drift-duration:6.3s}
.login-snowfall span:nth-child(89){--x:93.7%;--duration:17.2s;--delay:-15.1s;--size:3.8px;--opacity:0.86;--drift-duration:4.9s}
.login-snowfall span:nth-child(90){--x:6.3%;--duration:12.4s;--delay:-6s;--size:3.6px;--opacity:0.75;--drift-duration:5.3s}
.login-snowfall span:nth-child(91){--x:44.8%;--duration:17.6s;--delay:-8.3s;--size:4.7px;--opacity:0.61;--drift-duration:5.6s}
.login-snowfall span:nth-child(92){--x:1.3%;--duration:10.3s;--delay:-12.4s;--size:2.2px;--opacity:0.69;--drift-duration:3.3s}
.login-snowfall span:nth-child(93){--x:82.7%;--duration:18.8s;--delay:-6.9s;--size:4px;--opacity:0.56;--drift-duration:6.8s}
.login-snowfall span:nth-child(94){--x:59.8%;--duration:19s;--delay:-10.1s;--size:4.4px;--opacity:0.55;--drift-duration:5s}
.login-snowfall span:nth-child(95){--x:83.7%;--duration:11.2s;--delay:-12.5s;--size:2.3px;--opacity:0.68;--drift-duration:4.3s}
.login-snowfall span:nth-child(96){--x:95.4%;--duration:16.1s;--delay:-8.1s;--size:5px;--opacity:0.69;--drift-duration:6s}
.login-snowfall span:nth-child(97){--x:59.7%;--duration:19.7s;--delay:-6.6s;--size:2.7px;--opacity:0.56;--drift-duration:3.7s}
.login-snowfall span:nth-child(98){--x:73.4%;--duration:16.7s;--delay:-16.4s;--size:3.5px;--opacity:0.46;--drift-duration:5.6s}
.login-snowfall span:nth-child(99){--x:54.4%;--duration:13s;--delay:-14.2s;--size:5px;--opacity:0.71;--drift-duration:3s}
.login-snowfall span:nth-child(100){--x:70.4%;--duration:18.4s;--delay:-.3s;--size:2.7px;--opacity:0.51;--drift-duration:5.1s}
/* v.394: "øk innstillinger for snømengde til maks 250" -- nth-child(101)-(250), same deterministic-pseudo-random authoring convention as the set above, generated via a seeded PRNG script (see session record) within the same value ranges. */
.login-snowfall span:nth-child(101){--x:51.1%;--duration:13s;--delay:-9.6s;--size:3.3px;--opacity:0.49;--drift-duration:3.3s}
.login-snowfall span:nth-child(102){--x:66%;--duration:19.2s;--delay:-15.7s;--size:3.8px;--opacity:0.74;--drift-duration:3.1s}
.login-snowfall span:nth-child(103){--x:92%;--duration:11.9s;--delay:-4.7s;--size:3.9px;--opacity:0.71;--drift-duration:4.4s}
.login-snowfall span:nth-child(104){--x:86.3%;--duration:15.6s;--delay:-14.6s;--size:4.5px;--opacity:0.45;--drift-duration:5.7s}
.login-snowfall span:nth-child(105){--x:69.2%;--duration:15.1s;--delay:-9.9s;--size:3.1px;--opacity:0.59;--drift-duration:6.5s}
.login-snowfall span:nth-child(106){--x:16%;--duration:13s;--delay:-2.7s;--size:2.8px;--opacity:0.54;--drift-duration:5.2s}
.login-snowfall span:nth-child(107){--x:4.7%;--duration:18.4s;--delay:-4.9s;--size:4.9px;--opacity:0.65;--drift-duration:4.5s}
.login-snowfall span:nth-child(108){--x:95.8%;--duration:19.7s;--delay:-2.6s;--size:4.9px;--opacity:0.90;--drift-duration:6.3s}
.login-snowfall span:nth-child(109){--x:67.2%;--duration:14.3s;--delay:-8.8s;--size:4.1px;--opacity:0.48;--drift-duration:3.8s}
.login-snowfall span:nth-child(110){--x:68.3%;--duration:19.6s;--delay:-17.4s;--size:4.5px;--opacity:0.63;--drift-duration:4.4s}
.login-snowfall span:nth-child(111){--x:4.7%;--duration:16.6s;--delay:-6.2s;--size:4.9px;--opacity:0.61;--drift-duration:5.5s}
.login-snowfall span:nth-child(112){--x:89.4%;--duration:9.8s;--delay:-4.4s;--size:3.1px;--opacity:0.85;--drift-duration:3.5s}
.login-snowfall span:nth-child(113){--x:91.3%;--duration:9.8s;--delay:-5.6s;--size:3.1px;--opacity:0.56;--drift-duration:5s}
.login-snowfall span:nth-child(114){--x:76.5%;--duration:17.3s;--delay:-3s;--size:3.9px;--opacity:0.75;--drift-duration:5s}
.login-snowfall span:nth-child(115){--x:70.8%;--duration:13.1s;--delay:-5.2s;--size:3.5px;--opacity:0.82;--drift-duration:6.8s}
.login-snowfall span:nth-child(116){--x:68.9%;--duration:9.2s;--delay:-17.1s;--size:2.5px;--opacity:0.47;--drift-duration:6.3s}
.login-snowfall span:nth-child(117){--x:1.1%;--duration:14.3s;--delay:-15.6s;--size:4.5px;--opacity:0.85;--drift-duration:3.7s}
.login-snowfall span:nth-child(118){--x:66.9%;--duration:19.9s;--delay:-4.9s;--size:2px;--opacity:0.47;--drift-duration:5.2s}
.login-snowfall span:nth-child(119){--x:7%;--duration:12.6s;--delay:-4.6s;--size:2.6px;--opacity:0.80;--drift-duration:5.9s}
.login-snowfall span:nth-child(120){--x:87.4%;--duration:11.9s;--delay:-4.6s;--size:2.4px;--opacity:0.66;--drift-duration:3.4s}
.login-snowfall span:nth-child(121){--x:7.8%;--duration:14.2s;--delay:-16.7s;--size:4.5px;--opacity:0.78;--drift-duration:6.6s}
.login-snowfall span:nth-child(122){--x:48.7%;--duration:9.2s;--delay:-6.7s;--size:3.7px;--opacity:0.87;--drift-duration:5.3s}
.login-snowfall span:nth-child(123){--x:39%;--duration:15.6s;--delay:-1.5s;--size:5px;--opacity:0.90;--drift-duration:3.5s}
.login-snowfall span:nth-child(124){--x:56.7%;--duration:19.8s;--delay:-5.4s;--size:2.4px;--opacity:0.46;--drift-duration:6.5s}
.login-snowfall span:nth-child(125){--x:91.9%;--duration:13.3s;--delay:-13.4s;--size:3.2px;--opacity:0.51;--drift-duration:5.2s}
.login-snowfall span:nth-child(126){--x:80.3%;--duration:9.3s;--delay:-17.1s;--size:4.5px;--opacity:0.66;--drift-duration:6.6s}
.login-snowfall span:nth-child(127){--x:10.6%;--duration:12.7s;--delay:-14.3s;--size:3.1px;--opacity:0.77;--drift-duration:4.1s}
.login-snowfall span:nth-child(128){--x:74.8%;--duration:9.6s;--delay:-7.1s;--size:3.8px;--opacity:0.87;--drift-duration:6.4s}
.login-snowfall span:nth-child(129){--x:57.8%;--duration:13.8s;--delay:-6.4s;--size:4.6px;--opacity:0.57;--drift-duration:3.5s}
.login-snowfall span:nth-child(130){--x:72.4%;--duration:15.2s;--delay:-2.4s;--size:4.5px;--opacity:0.48;--drift-duration:6.4s}
.login-snowfall span:nth-child(131){--x:78.2%;--duration:16.1s;--delay:-15s;--size:3.9px;--opacity:0.72;--drift-duration:4.2s}
.login-snowfall span:nth-child(132){--x:76.5%;--duration:11.7s;--delay:-4.1s;--size:2.6px;--opacity:0.57;--drift-duration:4.9s}
.login-snowfall span:nth-child(133){--x:16.8%;--duration:9.6s;--delay:-3.7s;--size:3.1px;--opacity:0.82;--drift-duration:4.7s}
.login-snowfall span:nth-child(134){--x:51.6%;--duration:20s;--delay:-16.7s;--size:2.6px;--opacity:0.71;--drift-duration:5.3s}
.login-snowfall span:nth-child(135){--x:16.2%;--duration:10.6s;--delay:-6.1s;--size:4.1px;--opacity:0.70;--drift-duration:6.3s}
.login-snowfall span:nth-child(136){--x:40.2%;--duration:19.8s;--delay:-17s;--size:3.2px;--opacity:0.53;--drift-duration:6.9s}
.login-snowfall span:nth-child(137){--x:67.5%;--duration:15.8s;--delay:-9.3s;--size:3.4px;--opacity:0.75;--drift-duration:6.3s}
.login-snowfall span:nth-child(138){--x:18.8%;--duration:13.8s;--delay:-7.3s;--size:3.9px;--opacity:0.59;--drift-duration:6.5s}
.login-snowfall span:nth-child(139){--x:46.4%;--duration:15.8s;--delay:-14.9s;--size:3.3px;--opacity:0.57;--drift-duration:6.8s}
.login-snowfall span:nth-child(140){--x:10%;--duration:12.4s;--delay:-11.5s;--size:3.4px;--opacity:0.60;--drift-duration:6.1s}
.login-snowfall span:nth-child(141){--x:34.8%;--duration:16.8s;--delay:-14.6s;--size:4.7px;--opacity:0.87;--drift-duration:3.6s}
.login-snowfall span:nth-child(142){--x:3.2%;--duration:9s;--delay:-10.2s;--size:3.5px;--opacity:0.85;--drift-duration:3.6s}
.login-snowfall span:nth-child(143){--x:47%;--duration:13.5s;--delay:-16.1s;--size:4.5px;--opacity:0.58;--drift-duration:3.6s}
.login-snowfall span:nth-child(144){--x:42.3%;--duration:9.5s;--delay:-4.7s;--size:3.7px;--opacity:0.48;--drift-duration:3.1s}
.login-snowfall span:nth-child(145){--x:22.6%;--duration:11.6s;--delay:-8.3s;--size:4.1px;--opacity:0.64;--drift-duration:6.7s}
.login-snowfall span:nth-child(146){--x:23.4%;--duration:18.7s;--delay:-5.9s;--size:4.7px;--opacity:0.88;--drift-duration:5s}
.login-snowfall span:nth-child(147){--x:64.4%;--duration:11.7s;--delay:-6s;--size:3.7px;--opacity:0.64;--drift-duration:4.6s}
.login-snowfall span:nth-child(148){--x:75.4%;--duration:16.7s;--delay:-14.8s;--size:4.1px;--opacity:0.82;--drift-duration:3.9s}
.login-snowfall span:nth-child(149){--x:16.8%;--duration:19.7s;--delay:-1.4s;--size:2.7px;--opacity:0.74;--drift-duration:4.4s}
.login-snowfall span:nth-child(150){--x:67.1%;--duration:13.1s;--delay:-7.3s;--size:2.6px;--opacity:0.45;--drift-duration:4.4s}
.login-snowfall span:nth-child(151){--x:64.5%;--duration:16.1s;--delay:-3.3s;--size:2.9px;--opacity:0.69;--drift-duration:3.6s}
.login-snowfall span:nth-child(152){--x:76.8%;--duration:16.8s;--delay:-11.9s;--size:2.5px;--opacity:0.88;--drift-duration:6.8s}
.login-snowfall span:nth-child(153){--x:9.1%;--duration:16.4s;--delay:-2.9s;--size:3.4px;--opacity:0.51;--drift-duration:3.7s}
.login-snowfall span:nth-child(154){--x:16.2%;--duration:9.5s;--delay:-12s;--size:3.5px;--opacity:0.68;--drift-duration:6.4s}
.login-snowfall span:nth-child(155){--x:38.9%;--duration:12.3s;--delay:-3.4s;--size:4.3px;--opacity:0.76;--drift-duration:5.1s}
.login-snowfall span:nth-child(156){--x:94%;--duration:19.3s;--delay:-.8s;--size:3.2px;--opacity:0.68;--drift-duration:4.8s}
.login-snowfall span:nth-child(157){--x:7.9%;--duration:10.7s;--delay:-17.1s;--size:4.3px;--opacity:0.89;--drift-duration:4.8s}
.login-snowfall span:nth-child(158){--x:48.1%;--duration:13.4s;--delay:-.6s;--size:3.6px;--opacity:0.56;--drift-duration:3.8s}
.login-snowfall span:nth-child(159){--x:60.1%;--duration:14.7s;--delay:-5.5s;--size:4.8px;--opacity:0.51;--drift-duration:4.9s}
.login-snowfall span:nth-child(160){--x:45.2%;--duration:9.5s;--delay:-8.9s;--size:2px;--opacity:0.47;--drift-duration:5.4s}
.login-snowfall span:nth-child(161){--x:77.9%;--duration:17.6s;--delay:-17.6s;--size:3px;--opacity:0.76;--drift-duration:3.9s}
.login-snowfall span:nth-child(162){--x:18.5%;--duration:12.8s;--delay:-6.1s;--size:2.9px;--opacity:0.57;--drift-duration:6.2s}
.login-snowfall span:nth-child(163){--x:71.5%;--duration:17.9s;--delay:-1.2s;--size:4.1px;--opacity:0.86;--drift-duration:5.1s}
.login-snowfall span:nth-child(164){--x:64.8%;--duration:11.9s;--delay:-8s;--size:4.1px;--opacity:0.70;--drift-duration:5.3s}
.login-snowfall span:nth-child(165){--x:96%;--duration:17.6s;--delay:-3.6s;--size:4.1px;--opacity:0.65;--drift-duration:3.2s}
.login-snowfall span:nth-child(166){--x:56.4%;--duration:19.6s;--delay:-5.1s;--size:2px;--opacity:0.62;--drift-duration:3.7s}
.login-snowfall span:nth-child(167){--x:57.3%;--duration:9.2s;--delay:-7s;--size:4.7px;--opacity:0.52;--drift-duration:5.8s}
.login-snowfall span:nth-child(168){--x:27.8%;--duration:10s;--delay:-16.7s;--size:4px;--opacity:0.60;--drift-duration:6.4s}
.login-snowfall span:nth-child(169){--x:14.9%;--duration:14.5s;--delay:-2.2s;--size:4px;--opacity:0.80;--drift-duration:4.8s}
.login-snowfall span:nth-child(170){--x:85.2%;--duration:10.2s;--delay:-3.7s;--size:3.9px;--opacity:0.57;--drift-duration:3.9s}
.login-snowfall span:nth-child(171){--x:82.9%;--duration:17.2s;--delay:-6.6s;--size:2.6px;--opacity:0.89;--drift-duration:4.6s}
.login-snowfall span:nth-child(172){--x:83%;--duration:9.5s;--delay:-15.1s;--size:3px;--opacity:0.75;--drift-duration:4.8s}
.login-snowfall span:nth-child(173){--x:26.3%;--duration:14.4s;--delay:-5.4s;--size:3px;--opacity:0.79;--drift-duration:3.9s}
.login-snowfall span:nth-child(174){--x:66.9%;--duration:14.4s;--delay:-4.9s;--size:3px;--opacity:0.88;--drift-duration:6.2s}
.login-snowfall span:nth-child(175){--x:26.6%;--duration:16.1s;--delay:-7.5s;--size:4.1px;--opacity:0.51;--drift-duration:6.2s}
.login-snowfall span:nth-child(176){--x:59.9%;--duration:10.7s;--delay:-9.6s;--size:2.5px;--opacity:0.83;--drift-duration:3.5s}
.login-snowfall span:nth-child(177){--x:76.5%;--duration:17.9s;--delay:-1.5s;--size:4.2px;--opacity:0.87;--drift-duration:4.1s}
.login-snowfall span:nth-child(178){--x:11.4%;--duration:19.4s;--delay:-5s;--size:3.7px;--opacity:0.79;--drift-duration:4.2s}
.login-snowfall span:nth-child(179){--x:15.3%;--duration:16.3s;--delay:-13.3s;--size:3.4px;--opacity:0.60;--drift-duration:5.6s}
.login-snowfall span:nth-child(180){--x:9.3%;--duration:9.5s;--delay:-14.2s;--size:3.6px;--opacity:0.67;--drift-duration:6.5s}
.login-snowfall span:nth-child(181){--x:73.9%;--duration:12.5s;--delay:-15.5s;--size:3.4px;--opacity:0.79;--drift-duration:6.5s}
.login-snowfall span:nth-child(182){--x:87.5%;--duration:11.5s;--delay:-6.1s;--size:4.7px;--opacity:0.88;--drift-duration:5.3s}
.login-snowfall span:nth-child(183){--x:85.1%;--duration:17.5s;--delay:-11.2s;--size:2.5px;--opacity:0.53;--drift-duration:4.6s}
.login-snowfall span:nth-child(184){--x:88.5%;--duration:11.4s;--delay:-17.1s;--size:3.2px;--opacity:0.54;--drift-duration:3.3s}
.login-snowfall span:nth-child(185){--x:47.7%;--duration:14.8s;--delay:-7.2s;--size:4.6px;--opacity:0.54;--drift-duration:6s}
.login-snowfall span:nth-child(186){--x:21.1%;--duration:13.5s;--delay:-10.8s;--size:2.9px;--opacity:0.49;--drift-duration:6.9s}
.login-snowfall span:nth-child(187){--x:40.7%;--duration:17.9s;--delay:-15.4s;--size:3.5px;--opacity:0.55;--drift-duration:6.4s}
.login-snowfall span:nth-child(188){--x:10.4%;--duration:18.6s;--delay:-4.3s;--size:2px;--opacity:0.68;--drift-duration:4.4s}
.login-snowfall span:nth-child(189){--x:20.2%;--duration:12.2s;--delay:-7.3s;--size:2.5px;--opacity:0.87;--drift-duration:5.8s}
.login-snowfall span:nth-child(190){--x:54.5%;--duration:11.9s;--delay:-17.5s;--size:4.5px;--opacity:0.56;--drift-duration:6.1s}
.login-snowfall span:nth-child(191){--x:16.3%;--duration:14.1s;--delay:-10.4s;--size:2.2px;--opacity:0.88;--drift-duration:3.9s}
.login-snowfall span:nth-child(192){--x:69%;--duration:9.8s;--delay:-16.3s;--size:4.4px;--opacity:0.67;--drift-duration:5.8s}
.login-snowfall span:nth-child(193){--x:50.9%;--duration:14.7s;--delay:-5.3s;--size:2px;--opacity:0.66;--drift-duration:5.2s}
.login-snowfall span:nth-child(194){--x:18.3%;--duration:12.2s;--delay:-16.2s;--size:2.7px;--opacity:0.81;--drift-duration:3.2s}
.login-snowfall span:nth-child(195){--x:79.9%;--duration:15.5s;--delay:-6s;--size:3.9px;--opacity:0.53;--drift-duration:6.3s}
.login-snowfall span:nth-child(196){--x:90.8%;--duration:11.6s;--delay:-3.4s;--size:2.4px;--opacity:0.51;--drift-duration:5.6s}
.login-snowfall span:nth-child(197){--x:16.6%;--duration:12.9s;--delay:-1s;--size:3.1px;--opacity:0.73;--drift-duration:5.8s}
.login-snowfall span:nth-child(198){--x:28.8%;--duration:12.8s;--delay:-1.2s;--size:2.4px;--opacity:0.81;--drift-duration:6.6s}
.login-snowfall span:nth-child(199){--x:18.9%;--duration:10.3s;--delay:-16.8s;--size:4.1px;--opacity:0.61;--drift-duration:6.9s}
.login-snowfall span:nth-child(200){--x:85.2%;--duration:17.6s;--delay:-12.2s;--size:2.5px;--opacity:0.69;--drift-duration:3.7s}
.login-snowfall span:nth-child(201){--x:87.4%;--duration:11.8s;--delay:-3.5s;--size:2.8px;--opacity:0.54;--drift-duration:5.5s}
.login-snowfall span:nth-child(202){--x:58.1%;--duration:13s;--delay:-5.4s;--size:3px;--opacity:0.54;--drift-duration:6.7s}
.login-snowfall span:nth-child(203){--x:48.9%;--duration:15.7s;--delay:-3.6s;--size:4.1px;--opacity:0.54;--drift-duration:4.4s}
.login-snowfall span:nth-child(204){--x:77%;--duration:19.2s;--delay:-11.7s;--size:2.9px;--opacity:0.52;--drift-duration:5.7s}
.login-snowfall span:nth-child(205){--x:18.4%;--duration:9.5s;--delay:-15.1s;--size:4.4px;--opacity:0.79;--drift-duration:7s}
.login-snowfall span:nth-child(206){--x:73.1%;--duration:15.5s;--delay:-8.7s;--size:4.4px;--opacity:0.90;--drift-duration:4.1s}
.login-snowfall span:nth-child(207){--x:19.9%;--duration:18.8s;--delay:-6.3s;--size:4.3px;--opacity:0.50;--drift-duration:3.2s}
.login-snowfall span:nth-child(208){--x:73.2%;--duration:14.6s;--delay:-2.1s;--size:3.9px;--opacity:0.48;--drift-duration:6s}
.login-snowfall span:nth-child(209){--x:51.4%;--duration:11.6s;--delay:-5.5s;--size:2.2px;--opacity:0.68;--drift-duration:6.1s}
.login-snowfall span:nth-child(210){--x:83.6%;--duration:9.6s;--delay:-14.8s;--size:4.5px;--opacity:0.65;--drift-duration:5.4s}
.login-snowfall span:nth-child(211){--x:56.3%;--duration:11.7s;--delay:-3.8s;--size:4.9px;--opacity:0.48;--drift-duration:5.1s}
.login-snowfall span:nth-child(212){--x:85.5%;--duration:19.9s;--delay:-11.9s;--size:4.8px;--opacity:0.81;--drift-duration:4.7s}
.login-snowfall span:nth-child(213){--x:69.5%;--duration:16s;--delay:-17.2s;--size:3.2px;--opacity:0.68;--drift-duration:5.5s}
.login-snowfall span:nth-child(214){--x:25.3%;--duration:12.4s;--delay:-2.7s;--size:3.8px;--opacity:0.65;--drift-duration:4s}
.login-snowfall span:nth-child(215){--x:25.3%;--duration:11.4s;--delay:-9.1s;--size:2.1px;--opacity:0.75;--drift-duration:5.9s}
.login-snowfall span:nth-child(216){--x:3.5%;--duration:13.9s;--delay:-14s;--size:2.1px;--opacity:0.88;--drift-duration:5.1s}
.login-snowfall span:nth-child(217){--x:70.7%;--duration:9.2s;--delay:-9.1s;--size:4.8px;--opacity:0.87;--drift-duration:6s}
.login-snowfall span:nth-child(218){--x:80.6%;--duration:19.1s;--delay:-6.4s;--size:4.8px;--opacity:0.85;--drift-duration:6.2s}
.login-snowfall span:nth-child(219){--x:52.3%;--duration:9.3s;--delay:-11.3s;--size:4.6px;--opacity:0.58;--drift-duration:5.7s}
.login-snowfall span:nth-child(220){--x:13.1%;--duration:10.7s;--delay:-15.3s;--size:4.5px;--opacity:0.73;--drift-duration:3.9s}
.login-snowfall span:nth-child(221){--x:12.6%;--duration:9.8s;--delay:-9.7s;--size:3px;--opacity:0.64;--drift-duration:3.1s}
.login-snowfall span:nth-child(222){--x:5.5%;--duration:15.8s;--delay:-4.8s;--size:3.2px;--opacity:0.54;--drift-duration:4.8s}
.login-snowfall span:nth-child(223){--x:13%;--duration:19.7s;--delay:-.8s;--size:2.2px;--opacity:0.74;--drift-duration:5.6s}
.login-snowfall span:nth-child(224){--x:50.9%;--duration:16.4s;--delay:-4.5s;--size:5px;--opacity:0.49;--drift-duration:4.4s}
.login-snowfall span:nth-child(225){--x:69.6%;--duration:11.5s;--delay:-4.1s;--size:4px;--opacity:0.56;--drift-duration:6.2s}
.login-snowfall span:nth-child(226){--x:65.1%;--duration:13.2s;--delay:-1.3s;--size:3.4px;--opacity:0.48;--drift-duration:4.4s}
.login-snowfall span:nth-child(227){--x:57.5%;--duration:9.7s;--delay:-.3s;--size:2.3px;--opacity:0.63;--drift-duration:4s}
.login-snowfall span:nth-child(228){--x:67.1%;--duration:18.4s;--delay:-15.2s;--size:4.5px;--opacity:0.71;--drift-duration:4.3s}
.login-snowfall span:nth-child(229){--x:1.1%;--duration:15.8s;--delay:-9.3s;--size:4.2px;--opacity:0.64;--drift-duration:5.9s}
.login-snowfall span:nth-child(230){--x:21.5%;--duration:16.6s;--delay:-8.7s;--size:3.3px;--opacity:0.50;--drift-duration:6.9s}
.login-snowfall span:nth-child(231){--x:92.1%;--duration:11.3s;--delay:-15.4s;--size:5px;--opacity:0.81;--drift-duration:4.9s}
.login-snowfall span:nth-child(232){--x:17.7%;--duration:9.8s;--delay:-6.4s;--size:3.8px;--opacity:0.63;--drift-duration:3.4s}
.login-snowfall span:nth-child(233){--x:61.6%;--duration:16.5s;--delay:-10.2s;--size:3.9px;--opacity:0.71;--drift-duration:6.9s}
.login-snowfall span:nth-child(234){--x:5.1%;--duration:16.3s;--delay:-9.1s;--size:5px;--opacity:0.86;--drift-duration:4.6s}
.login-snowfall span:nth-child(235){--x:17.8%;--duration:16.5s;--delay:-12.2s;--size:4.3px;--opacity:0.89;--drift-duration:4.3s}
.login-snowfall span:nth-child(236){--x:60.2%;--duration:12.2s;--delay:-9.3s;--size:2px;--opacity:0.74;--drift-duration:4.6s}
.login-snowfall span:nth-child(237){--x:32.9%;--duration:11.9s;--delay:-14.2s;--size:3.6px;--opacity:0.76;--drift-duration:4s}
.login-snowfall span:nth-child(238){--x:76.8%;--duration:16s;--delay:-13.5s;--size:3px;--opacity:0.85;--drift-duration:3.7s}
.login-snowfall span:nth-child(239){--x:78.9%;--duration:12.5s;--delay:-10s;--size:2.6px;--opacity:0.75;--drift-duration:3.3s}
.login-snowfall span:nth-child(240){--x:74.4%;--duration:18.9s;--delay:-16.8s;--size:3.7px;--opacity:0.73;--drift-duration:4.4s}
.login-snowfall span:nth-child(241){--x:18.7%;--duration:9.8s;--delay:-15.9s;--size:3.7px;--opacity:0.59;--drift-duration:4.8s}
.login-snowfall span:nth-child(242){--x:55.2%;--duration:9.4s;--delay:-9.1s;--size:4.4px;--opacity:0.49;--drift-duration:6.3s}
.login-snowfall span:nth-child(243){--x:60%;--duration:19.2s;--delay:-7.9s;--size:4.7px;--opacity:0.64;--drift-duration:3.4s}
.login-snowfall span:nth-child(244){--x:18.7%;--duration:11.9s;--delay:-9.6s;--size:3.4px;--opacity:0.66;--drift-duration:4.1s}
.login-snowfall span:nth-child(245){--x:31.2%;--duration:15.2s;--delay:-8.1s;--size:4.6px;--opacity:0.60;--drift-duration:3.1s}
.login-snowfall span:nth-child(246){--x:68.3%;--duration:19.1s;--delay:-17.7s;--size:4.9px;--opacity:0.72;--drift-duration:4.2s}
.login-snowfall span:nth-child(247){--x:43.6%;--duration:18.5s;--delay:-12.8s;--size:2.6px;--opacity:0.75;--drift-duration:5.9s}
.login-snowfall span:nth-child(248){--x:2.1%;--duration:14.3s;--delay:-6.9s;--size:2.4px;--opacity:0.78;--drift-duration:4.9s}
.login-snowfall span:nth-child(249){--x:9.7%;--duration:18.1s;--delay:-13.7s;--size:4.4px;--opacity:0.51;--drift-duration:4.6s}
.login-snowfall span:nth-child(250){--x:20.3%;--duration:19.4s;--delay:-1.8s;--size:4.4px;--opacity:0.50;--drift-duration:6.4s}
@media(prefers-reduced-motion:reduce){.login-snowfall span{animation:none;opacity:0}}