:root{
  --max-img-width: 1536px;
  --pad: clamp(16px, 4vw, 48px);
  --bg: #ffffff;
}
@media (prefers-color-scheme: dark){
  :root{ --bg: #0b0d10; }
}
*{box-sizing:border-box}
html, body {height:100%}
body{
  margin:0;
  min-height:100svh;
  display:grid;
  place-items:center;
  background:var(--bg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", "Liberation Sans", sans-serif;
}
.main{position:fixed; inset:0; display:grid; place-items:center; padding:var(--pad);}
.logo{
  display:block;
  width:100%;
  max-width:var(--max-img-width);
  height:auto;
  object-fit:contain;
  margin:0 auto;
  opacity:0;
  animation: fadeIn .9s ease-out forwards;
  will-change: opacity, transform;
}
@keyframes fadeIn{
  from{opacity:0; transform: translateY(8px) scale(.995);}
  to{opacity:1; transform: none;}
}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}