/* Hand-built pixel scene: the reference is a style guide, never a page background. */
#login-screen {
  position: relative;
  z-index: 0;
  overflow: hidden;
  isolation: isolate;
  background: #101b2d !important;
  color: #eff4d5;
}
#login-screen .login-backdrop {
  z-index: 0;
  overflow: hidden;
  background: linear-gradient(#101b2d,#20334b 54%,#142b25);
}
.login-scene-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  shape-rendering: crispEdges;
  image-rendering: pixelated;
  animation: login-scene-shift 24s ease-in-out infinite alternate;
}
.login-orbit { animation: pixel-twinkle 3s steps(3,end) infinite; transform-origin: center; }
.login-lantern { animation: lantern-flicker 1.8s steps(2,end) infinite; }
.login-fireflies { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.login-fireflies i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 5px;
  height: 5px;
  background: #d7ff94;
  box-shadow: 0 0 8px 3px rgba(193,255,112,.66), 0 0 20px 8px rgba(102,245,142,.22);
  opacity: 0;
  animation: firefly-drift var(--duration) ease-in-out var(--delay) infinite;
}
.login-fireflies i:nth-child(1) { --x: 12%; --y: 54%; --duration: 6.3s; --delay: -2s; }
.login-fireflies i:nth-child(2) { --x: 20%; --y: 78%; --duration: 7.7s; --delay: -5s; }
.login-fireflies i:nth-child(3) { --x: 83%; --y: 49%; --duration: 6.8s; --delay: -1s; }
.login-fireflies i:nth-child(4) { --x: 91%; --y: 73%; --duration: 8s; --delay: -4s; }
.login-fireflies i:nth-child(5) { --x: 8%; --y: 84%; --duration: 7.1s; --delay: -3s; }
.login-fireflies i:nth-child(6) { --x: 76%; --y: 82%; --duration: 9s; --delay: -6s; }

#login-screen .login-box {
  z-index: 2;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(540px, calc(100vw - 34px));
  max-height: calc(100dvh - 56px);
  overflow: auto;
  padding: 44px clamp(25px, 5vw, 58px) 30px;
  border: 3px solid #c2ad73 !important;
  border-radius: 7px !important;
  outline: 4px solid #101924;
  outline-offset: 3px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(37,94,61,.34), transparent 48%),
    linear-gradient(155deg, rgba(13,45,37,.985), rgba(5,25,26,.99)) !important;
  box-shadow: inset 0 0 0 2px rgba(221,205,138,.17), inset 0 0 36px rgba(65,198,131,.08), 0 20px 70px rgba(0,0,0,.58), 0 0 36px rgba(112,222,148,.13) !important;
  text-align: center;
  animation: login-panel-arrive .7s cubic-bezier(.2,.8,.2,1) both;
  scrollbar-color: #6d8c66 #10231f;
}
#login-screen .login-box::before,
#login-screen .login-box::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 34px;
  height: 34px;
  border: 4px solid #82c991;
  opacity: .82;
  pointer-events: none;
}
#login-screen .login-box::before { top: 9px; left: 9px; border-right: 0; border-bottom: 0; }
#login-screen .login-box::after { right: 9px; bottom: 9px; border-left: 0; border-top: 0; }
#login-screen .login-box > * { position: relative; z-index: 1; }
#login-screen .login-top-sprout {
  position: absolute !important;
  top: -23px;
  left: 50%;
  z-index: 2 !important;
  color: #efff91;
  font-size: 34px;
  line-height: 1;
  text-shadow: 0 0 10px #ceff71, 0 0 27px #64f6a5;
  animation: pixel-twinkle 2.4s steps(3,end) infinite;
}
#login-screen .brand-mark { line-height: .88; letter-spacing: .08em; text-shadow: 3px 3px 0 #142015, 0 0 20px rgba(135,240,100,.3); }
#login-screen .brand-mark span { display: block; color: #f4ecaf !important; font-size: clamp(44px,5vw,59px); }
#login-screen .brand-mark strong { display: block; margin-top: 8px; color: #9ee88d !important; font-size: clamp(27px,3.6vw,39px); }
#login-screen .login-subtitle {
  margin: 14px 0 23px;
  padding: 7px 12px;
  border: 1px solid rgba(221,205,128,.48);
  border-radius: 3px;
  background: rgba(6,26,25,.78);
  color: #f1e4aa !important;
  font: 700 11px/1.3 "Segoe UI",Tahoma,sans-serif !important;
  letter-spacing: .02em;
}
#login-screen .auth-mode-switch {
  width: 100%;
  margin: 0 0 14px;
  padding: 4px;
  border: 1px solid rgba(122,202,151,.45);
  border-radius: 5px;
  background: rgba(3,17,20,.78);
  box-shadow: inset 0 1px rgba(255,255,255,.04), 0 4px 12px rgba(0,0,0,.2);
}
#login-screen .auth-mode-switch button {
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: #c6d8c8;
  font: 800 11px "Segoe UI",Tahoma,sans-serif;
  transition: background .16s ease, box-shadow .16s ease, transform .16s ease;
}
#login-screen .auth-mode-switch button:hover { color: #fff5bf; transform: translateY(-1px); }
#login-screen .auth-mode-switch button.active { border-color: #d9cf91; background: linear-gradient(#536d44,#294737); color: #fff2b1; box-shadow: inset 0 1px #ffffff45,0 0 12px rgba(181,234,111,.16); }
#login-screen #login-form { width: 100%; display: flex; flex-direction: column; align-items: stretch; }
#login-screen #login-form label { margin: 0 0 7px; color: #d6e6bd !important; font: 800 11px/1.25 "Segoe UI",Tahoma,sans-serif !important; letter-spacing: .04em; text-align: left; }
#login-screen .auth-fields { display: grid; gap: 4px; margin-bottom: 8px; }
#login-screen .auth-fields.hidden { display: none !important; }
#login-screen .auth-field.hidden { display: none !important; }
#login-screen .input-shell {
  display: flex;
  align-items: center;
  min-height: 48px !important;
  margin: 0 0 7px;
  padding: 0 12px;
  border: 1px solid #91bf8b !important;
  border-radius: 4px !important;
  background: rgba(4,20,21,.94) !important;
  box-shadow: inset 0 0 0 2px rgba(2,10,12,.36), 0 0 0 2px rgba(236,224,153,.07);
}
#login-screen .input-shell:focus-within { border-color: #edeea0 !important; box-shadow: 0 0 0 2px rgba(245,242,142,.18),0 0 18px rgba(143,255,153,.18); }
#login-screen .cursor-block { width: 27px; height: 27px; flex: 0 0 auto; margin-right: 11px; border: 2px solid #b5ecb3; border-radius: 2px; background: linear-gradient(145deg,#edf5c5 0 45%,#6daec0 46%); box-shadow: 2px 2px 0 #19392c; }
#login-screen #name-input,#login-screen #auth-login-name,#login-screen #auth-password,#login-screen #auth-register-name,#login-screen #auth-register-password { width: 100%; min-width: 0; padding: 10px 0; border: 0; outline: 0; background: transparent; color: #eff8e5; font: 700 14px "Segoe UI",Tahoma,sans-serif; user-select: text; -webkit-user-select: text; }
#login-screen .password-visibility-toggle { flex: 0 0 auto; min-width: 48px; min-height: 30px; border: 1px solid rgba(164,213,154,.48); border-radius: 3px; background: rgba(28,62,48,.9); color: #d9eac2; font: 800 10px "Segoe UI",Tahoma,sans-serif; cursor: pointer; }
#login-screen .password-visibility-toggle:hover { border-color: #f0dfa0; color: #fff0b7; }
#login-screen #name-input::placeholder,#login-screen #auth-login-name::placeholder,#login-screen #auth-password::placeholder,#login-screen #auth-register-name::placeholder,#login-screen #auth-register-password::placeholder { color: #91a497; }
#login-screen #auth-register-password-confirm { width: 100%; min-width: 0; padding: 10px 0; border: 0; outline: 0; background: transparent; color: #eff8e5; font: 700 14px "Segoe UI",Tahoma,sans-serif; user-select: text; -webkit-user-select: text; }
#login-screen #auth-register-password-confirm::placeholder { color: #91a497; }
#login-screen .auth-password-guidance { margin: -3px 0 3px; color: #a9c8ad; font: 600 10px/1.4 "Segoe UI",Tahoma,sans-serif; text-align: left; }
#login-screen .auth-password-guidance.is-error { color: #ffc28d; }
#login-screen .auth-recovery-note { margin: 5px 0 0; color: #a9b9a6; font: 600 9px/1.4 "Segoe UI",Tahoma,sans-serif; text-align: center; }
#login-screen .auth-recovery-note.hidden { display: none !important; }
#login-screen .auth-text-button { align-self:flex-end; padding:4px 0; border:0; background:transparent; color:#d8d49b; font:700 10px "Segoe UI",Tahoma,sans-serif; text-decoration:underline; cursor:pointer; }
#login-screen .auth-text-button:disabled { opacity:.5; cursor:not-allowed; }
#login-screen .auth-google-area { display:grid; justify-items:center; gap:5px; width:100%; margin-top:9px; }
#login-screen .auth-google-area.hidden { display:none !important; }
#login-screen .auth-divider { width:100%; display:flex; align-items:center; gap:10px; color:#8ea795; font:600 9px "Segoe UI",Tahoma,sans-serif; }
#login-screen .auth-divider::before,#login-screen .auth-divider::after { content:""; flex:1; height:1px; background:linear-gradient(90deg,transparent,#64836b,transparent); }
#login-screen #google-signin-status { min-height:13px; color:#a9b9a6; font:600 9px/1.35 "Segoe UI",Tahoma,sans-serif; }
#login-screen .auth-inline-panel { width:100%; margin:10px 0; padding:14px; border:1px solid #8cae7a; border-radius:6px; background:linear-gradient(145deg,rgba(22,57,43,.98),rgba(8,29,28,.98)); box-shadow:0 8px 25px #0007; text-align:left; }
#login-screen .auth-inline-panel.hidden { display:none !important; }
#login-screen .auth-inline-panel h2 { margin:0 0 6px; color:#f4e6aa; font:800 16px "Segoe UI",Tahoma,sans-serif; }
#login-screen .auth-inline-panel p,#login-screen .auth-inline-panel small { display:block; margin:4px 0 8px; color:#b4c6b4; font:600 10px/1.45 "Segoe UI",Tahoma,sans-serif; }
#login-screen .auth-inline-panel form { display:grid; gap:6px; }
#login-screen .auth-inline-panel label { color:#d6e6bd; font:700 10px "Segoe UI",Tahoma,sans-serif; }
#login-screen .auth-inline-panel input { width:100%; min-height:38px; padding:8px 10px; border:1px solid #78926a; border-radius:4px; background:#061a18; color:#f1f5df; font:700 12px "Segoe UI",Tahoma,sans-serif; }
#login-screen .auth-inline-panel form button { min-height:38px; border:1px solid #d7ec9d; border-radius:4px; background:linear-gradient(#a9ec8c,#298460); color:#103127; font:800 11px "Segoe UI",Tahoma,sans-serif; cursor:pointer; }
#login-screen #auth-forgot-link:disabled { opacity:.45; cursor:not-allowed; }
#login-screen #join-btn {
  min-height: 50px !important;
  margin-top: 10px;
  border: 1px solid #d7ec9d !important;
  border-radius: 5px !important;
  background: linear-gradient(#a9ec8c,#59bd79 56%,#298460) !important;
  color: #103127 !important;
  box-shadow: inset 0 1px #fff9c2aa,0 4px #175c45,0 9px 18px #0006,0 0 16px rgba(115,255,149,.17) !important;
  font-size: 15px;
  transition: filter .15s ease,transform .15s ease,box-shadow .15s ease;
}
#login-screen #join-btn:hover { filter: brightness(1.1); transform: translateY(-2px); box-shadow: inset 0 1px #fff9c2aa,0 6px #175c45,0 12px 22px #0008,0 0 21px rgba(115,255,149,.3) !important; }
#login-screen #join-btn:disabled { opacity: .65; cursor: wait; }
#login-screen #status-text { min-height: 18px; margin-top: 10px; color: #ffe39b !important; font: 700 11px/1.4 "Segoe UI",Tahoma,sans-serif !important; }
#login-screen .login-hint { margin-top: 11px; color: #bac9b8 !important; font: 600 9px/1.45 "Segoe UI",Tahoma,sans-serif !important; letter-spacing: .02em; }
#login-screen #auth-hint { max-width: 100%; }
#login-screen .auth-server-status { display:inline-flex;align-items:center;gap:7px;margin:0 0 12px;padding:5px 9px;border:1px solid rgba(130,178,130,.28);border-radius:999px;background:rgba(4,20,18,.62);color:#b9d0bb;font:700 9px/1.2 "Segoe UI",Tahoma,sans-serif; }
#login-screen .auth-server-status i { width:7px;height:7px;border-radius:50%;background:#a6b7a5;box-shadow:0 0 0 3px #ffffff0b; }
#login-screen .auth-server-status.is-ready i { background:#8fe58d;box-shadow:0 0 9px #8fe58d99; }
#login-screen .auth-server-status.is-degraded i { background:#ffb866;box-shadow:0 0 9px #ffb86688; }
#login-screen .auth-server-status.is-offline i { background:#ff7f6e;box-shadow:0 0 9px #ff7f6e88; }
#login-screen .auth-server-status.is-checking i { animation:auth-status-pulse 1s steps(2,end) infinite; }
@keyframes auth-status-pulse { 50% { opacity:.35; } }

.login-music-toggle {
  position: absolute;
  z-index: 5;
  top: max(14px,env(safe-area-inset-top));
  right: max(14px,env(safe-area-inset-right));
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 7px 12px;
  border: 1px solid rgba(202,232,147,.78);
  border-radius: 4px;
  background: rgba(5,27,25,.9);
  color: #eaf4bc;
  box-shadow: 0 3px 0 rgba(0,0,0,.48),0 0 18px rgba(113,248,154,.16);
  font: 900 15px "Segoe UI",Tahoma,sans-serif;
  cursor: pointer;
  transition: background .16s ease,box-shadow .16s ease,transform .16s ease;
}
.login-music-toggle span { font-size: 10px; letter-spacing: .03em; }
.login-music-toggle:hover { transform: translateY(-1px); background: #184131; box-shadow: 0 4px 0 rgba(0,0,0,.48),0 0 20px rgba(151,255,149,.3); }
.login-music-toggle[aria-pressed="true"] { color: #fff0a8; border-color: #f3d878; box-shadow: 0 3px 0 rgba(0,0,0,.48),0 0 20px rgba(255,221,113,.24); }
#login-screen #login-music { display: none; }

@keyframes firefly-drift { 0%,100% { opacity: 0; transform: translate(0,8px) scale(.55); } 25% { opacity: .9; } 55% { opacity: .42; transform: translate(10px,-18px) scale(1.15); } 78% { opacity: .82; transform: translate(-8px,-27px) scale(.8); } }
@keyframes login-scene-shift { from { transform: scale(1); filter: saturate(1.02) brightness(.97); } to { transform: scale(1.018); filter: saturate(1.12) brightness(1.04); } }
@keyframes login-panel-arrive { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes pixel-twinkle { 0%,100% { opacity: .78; filter: brightness(.92); } 50% { opacity: 1; filter: brightness(1.5); } }
@keyframes lantern-flicker { 0%,100% { opacity: .95; } 48% { opacity: .72; } 54% { opacity: 1; } }
@media (max-width: 700px) {
  #login-screen .login-box { width: min(520px,calc(100vw - 30px)); max-height: calc(100dvh - 38px); padding: 38px 25px 25px; }
  #login-screen .brand-mark span { font-size: clamp(38px,11vw,51px); }
  #login-screen .brand-mark strong { font-size: clamp(25px,7vw,33px); }
  #login-screen .login-subtitle { margin: 11px 0 15px; font-size: 10px !important; }
  #login-screen .auth-mode-switch { margin-bottom: 10px; }
  #login-screen .auth-mode-switch button { min-height: 35px; font-size: 10px; }
  #login-screen .input-shell { min-height: 45px !important; }
  #login-screen #join-btn { min-height: 47px !important; }
  #login-screen .login-hint { font-size: 8px !important; }
  .login-music-toggle { top: max(9px,env(safe-area-inset-top)); right: max(9px,env(safe-area-inset-right)); min-height: 34px; padding: 6px 9px; }
}
@media (max-height: 650px) {
  #login-screen .login-box { justify-content: flex-start; padding-top: 36px; padding-bottom: 20px; }
  #login-screen .login-subtitle { margin: 8px 0 10px; }
  #login-screen .auth-mode-switch { margin-bottom: 7px; }
  #login-screen .input-shell { min-height: 40px !important; }
  #login-screen #join-btn { min-height: 43px !important; margin-top: 6px; }
  #login-screen .login-hint { margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .login-scene-art,.login-orbit,.login-lantern,.login-fireflies i,#login-screen .login-box,#login-screen .login-top-sprout { animation: none !important; }
}

/* Wildseed login art: generated glade, transparent brand mark, and compact responsive framing. */
#login-screen .login-backdrop { position:absolute; inset:0; background:#071811 !important; }
#login-screen .login-scene-art { display:none; }
#login-screen .login-generated-scene {
  position:absolute; inset:-2%; width:104%; height:104%; object-fit:cover; object-position:center;
  filter:brightness(.72) saturate(1.04); transform:scale(1.01); animation:wildseed-glade-drift 26s ease-in-out infinite alternate;
  will-change:transform,filter;
}
#login-screen .login-backdrop::before {
  content:""; position:absolute; inset:-10%; z-index:1; pointer-events:none; opacity:.48; mix-blend-mode:screen;
  background:radial-gradient(ellipse at 14% 34%,rgba(105,255,154,.19),transparent 28%),radial-gradient(ellipse at 86% 61%,rgba(141,231,137,.16),transparent 31%),radial-gradient(ellipse at 53% 8%,rgba(255,205,105,.12),transparent 27%);
  animation:wildseed-aurora 12s ease-in-out infinite alternate;
}
#login-screen .login-backdrop::after {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(3,18,13,.08) 0 24%,rgba(3,16,12,.32) 58%,rgba(2,11,10,.5) 100%),linear-gradient(180deg,rgba(5,17,20,.1),transparent 42%,rgba(4,15,12,.25));
}
#login-screen .login-fireflies { z-index:2; }
#login-screen .login-fireflies i { width:4px; height:4px; box-shadow:0 0 9px 3px currentColor,0 0 22px 7px currentColor; }
#login-screen .login-fireflies i:nth-child(7) { --x:31%; --y:17%; --duration:8.4s; --delay:-4s; }
#login-screen .login-fireflies i:nth-child(8) { --x:64%; --y:24%; --duration:9.2s; --delay:-2s; }
#login-screen .login-fireflies i:nth-child(9) { --x:47%; --y:88%; --duration:8s; --delay:-7s; }
#login-screen .login-fireflies i:nth-child(10) { --x:96%; --y:36%; --duration:10s; --delay:-6s; }
#login-screen .login-fireflies i:nth-child(11) { --x:3%; --y:42%; --duration:6.7s; --delay:-1s; }
#login-screen .login-fireflies i:nth-child(12) { --x:71%; --y:57%; --duration:8.8s; --delay:-5s; }
#login-screen .login-fireflies i:nth-child(13) { --x:39%; --y:67%; --duration:7.3s; --delay:-2s; }
#login-screen .login-fireflies i:nth-child(14) { --x:58%; --y:9%; --duration:9.6s; --delay:-3s; }
#login-screen .login-fireflies i:nth-child(15) { --x:87%; --y:91%; --duration:11s; --delay:-8s; }
#login-screen .login-fireflies i:nth-child(16) { --x:14%; --y:26%; --duration:7.7s; --delay:-6s; }
#login-screen .login-fireflies i:nth-child(3n) { color:#d7f29a; }
#login-screen .login-fireflies i:nth-child(3n + 1) { color:#a8f3df; }
#login-screen .login-fireflies i:nth-child(3n + 2) { color:#f5d889; }
#login-screen .login-seed-motes { position:absolute; inset:0; z-index:2; overflow:hidden; pointer-events:none; }
#login-screen .login-seed-motes i { position:absolute; left:var(--x); top:var(--y); width:7px; height:9px; opacity:0; background:linear-gradient(135deg,#e7eaa0,#7ed89e 62%,#549f7a); clip-path:polygon(50% 0,76% 31%,100% 50%,67% 68%,50% 100%,33% 68%,0 50%,30% 31%); filter:drop-shadow(0 0 5px #91fac2); animation:wildseed-mote-drift var(--duration) ease-in-out var(--delay) infinite; }
#login-screen .login-seed-motes i:nth-child(1) { --x:24%; --y:78%; --duration:13s; --delay:-5s; }
#login-screen .login-seed-motes i:nth-child(2) { --x:78%; --y:32%; --duration:15s; --delay:-11s; }
#login-screen .login-seed-motes i:nth-child(3) { --x:12%; --y:47%; --duration:17s; --delay:-8s; }
#login-screen .login-seed-motes i:nth-child(4) { --x:91%; --y:75%; --duration:14s; --delay:-2s; }
#login-screen .login-seed-motes i:nth-child(5) { --x:65%; --y:85%; --duration:16s; --delay:-13s; }
#login-screen .login-seed-motes i:nth-child(6) { --x:36%; --y:25%; --duration:12s; --delay:-9s; }
#login-screen .brand-mark-image {
  display:block; width:auto; height:clamp(136px,20vh,220px); max-width:min(100%,390px); margin:-13px auto -7px;
  object-fit:contain; filter:drop-shadow(0 5px 9px rgba(0,0,0,.5)) drop-shadow(0 0 15px rgba(117,244,141,.14));
  animation:wildseed-logo-hover 4.8s ease-in-out infinite; will-change:transform,filter;
}
#login-screen .login-top-sprout { display:none; }
#login-screen .login-box {
  border-radius:12px !important; border-color:#c6af68 !important;
  background:radial-gradient(ellipse at 50% 0%,rgba(46,111,67,.28),transparent 52%),linear-gradient(155deg,rgba(10,39,31,.97),rgba(4,20,21,.985)) !important;
  box-shadow:inset 0 0 0 2px rgba(221,205,138,.2),inset 0 0 42px rgba(65,198,131,.1),0 22px 74px rgba(0,0,0,.66),0 0 40px rgba(112,222,148,.17) !important;
  backdrop-filter:blur(5px);
}
#login-screen .login-subtitle { border-radius:999px; box-shadow:inset 0 1px rgba(255,255,255,.06),0 3px 10px rgba(0,0,0,.18); }
@keyframes wildseed-glade-drift { 0% { transform:scale(1.01) translate3d(0,0,0); filter:brightness(.69) saturate(1.02); } 50% { filter:brightness(.76) saturate(1.1); } 100% { transform:scale(1.085) translate3d(-.8%,.35%,0); filter:brightness(.72) saturate(1.06); } }
@keyframes wildseed-aurora { from { transform:translate3d(-2%,1%,0) scale(.98); opacity:.28; } to { transform:translate3d(2%,-1%,0) scale(1.04); opacity:.62; } }
@keyframes wildseed-logo-hover { 0%,100% { transform:translateY(0); filter:drop-shadow(0 5px 9px rgba(0,0,0,.5)) drop-shadow(0 0 12px rgba(117,244,141,.13)); } 50% { transform:translateY(-4px); filter:drop-shadow(0 7px 12px rgba(0,0,0,.42)) drop-shadow(0 0 23px rgba(143,255,167,.34)); } }
@keyframes wildseed-mote-drift { 0%,100% { opacity:0; transform:translate3d(0,20px,0) rotate(-18deg) scale(.7); } 18%,77% { opacity:.75; } 52% { opacity:1; transform:translate3d(22px,-55px,0) rotate(32deg) scale(1.18); } 88% { opacity:.25; transform:translate3d(38px,-90px,0) rotate(72deg) scale(.8); } }
@media (max-width:700px) {
  #login-screen .brand-mark-image { height:clamp(122px,21vh,170px); margin:-8px auto -5px; }
  #login-screen .login-box { padding-top:34px; padding-bottom:22px; }
}
@media (max-height:650px) {
  #login-screen .brand-mark-image { height:clamp(100px,20vh,142px); margin:-6px auto -3px; }
  #login-screen .login-box { padding-top:29px; padding-bottom:15px; }
}
@media (prefers-reduced-motion:reduce) { #login-screen .login-generated-scene,#login-screen .login-backdrop::before,#login-screen .brand-mark-image,#login-screen .login-seed-motes i { animation:none; } }