/* One composed platform, based on the middle reference. No repeating tiles. */
:root{--divider-height:64px}
.ground,.ground--finish{
 position:relative;isolation:isolate;height:var(--divider-height);border:0;
 background:var(--ground) url('/assets/img/level-landscape-v4.svg') center / 100% 64px no-repeat;
 image-rendering:pixelated;
}
.ground::after{content:none}
@media(max-width:640px){
 .ground,.ground--finish{background-image:url('/assets/img/level-landscape-mobile-v4.svg');background-size:100% 64px}
}
/* Ночью платформа своя, а не осветлённая фильтром: у неё считанные цвета и
   жёсткие пиксели, фильтр размазал бы и то и другое. Геометрия та же. */
:root[data-theme="dark"] .ground,:root[data-theme="dark"] .ground--finish{
 background-image:url('/assets/img/level-landscape-v4-night.svg')}
@media(max-width:640px){
 :root[data-theme="dark"] .ground,:root[data-theme="dark"] .ground--finish{
  background-image:url('/assets/img/level-landscape-mobile-v4-night.svg')}
}
.ground__crystal{position:absolute;top:5px;left:16.5%;width:20px;height:28px;
 margin-left:-10px;background:url('/assets/img/level-crystal-v4.svg') center / contain no-repeat;
 pointer-events:none;animation:crystal-hover 2.4s steps(4,jump-none) infinite;animation-play-state:paused}
/* Ступенями по пикселю, как всё на сайте. Плавный ease-in-out перерисовывал
   окно 60 раз в секунду ради 4 px хода; без GPU это треть ядра. */
.ground__crystal:nth-child(2){left:50%;top:4px;width:18px;height:24px;margin-left:-9px;animation-delay:-.8s}
.ground__crystal:nth-child(3){left:83.5%;animation-delay:-1.6s}
.ground.is-visible .ground__crystal{animation-play-state:running}
@keyframes crystal-hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}   /* steps(4): 0,-1,-2,-3,-4 px */
/* One pixel of overlap covers fractional scroll rounding at the header edge. */
body .stage,body[class] .sec{scroll-margin-top:calc(var(--chrome-height,110px) - 1px)}
body .stage--hero{scroll-margin-top:calc(var(--chrome-height,110px) - 1px)}
@media(min-width:1280px){
 body .stage:not(.stage--hero){min-height:calc(100svh - var(--chrome-height,110px) - var(--divider-height))}
 body[class] .sec{min-height:calc(100svh - var(--chrome-height,110px) - var(--divider-height))}
 body[class] .sec--kit{height:auto}
}
@media(prefers-reduced-motion:reduce){.ground__crystal{animation:none}}
@media(min-width:1280px) and (max-height:1000px){
 body[class] .sec{padding-block:24px}
 body[class] .sec .banner{margin-bottom:20px}
}