:root{
  --bg:#000; --fade-ms:1400ms; --vh:100svh;
  --hint-h: 28px; --gap: 6px;
}
*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0;background:var(--bg);color:#fff;
  display:flex;justify-content:center;align-items:flex-start;
  min-height:var(--vh);
  font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  padding:0; /* строго ноль сверху/снизу */
  -webkit-tap-highlight-color: transparent;
}
#splash{
  position:relative;
  width:min(96vw,1100px);
  height:var(--vh);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:var(--gap); transition:opacity var(--fade-ms) linear;
  padding-top:0; padding-bottom:0;
}
#splash.fade-out{opacity:0}
.artwrap{
  position:relative; width:100%;
  height:calc( var(--vh) - var(--hint-h) - var(--gap) );
  display:flex; align-items:center; justify-content:center;
}
#art{
  display:block; max-height:100%; max-width:100%;
  width:auto; height:auto; transform-origin:center; transform:scale(0.95);
  will-change:transform; -webkit-user-drag:none; user-drag:none;
}
.hint{
  margin:0; font-size:clamp(18px,3.8vmin,24px);
  line-height:1.15; text-align:center; letter-spacing:.02em;
  color:#fff; background:#000; padding:8px 12px; border-radius:10px; opacity:.98;
  text-shadow:0 0 10px rgba(255,255,255,.2);
}
.blink{animation:blink 1.2s steps(2,end) infinite}
@keyframes blink{0%,49%{opacity:.55}50%,100%{opacity:1}}
#tapall{
  position:fixed; inset:0; background:transparent; border:0; padding:0; margin:0;
  z-index:2147483647; cursor:pointer; touch-action:manipulation;
}
@media (prefers-reduced-motion: reduce){
  :root{--fade-ms:1ms}
  .blink{animation:none!important}
}