@charset "UTF-8";

/* Порядок слоёв: timeline ПОСЛЕ norm (чтобы .node/.percent-block
   побеждали глобальный * reset из norm), но ДО help (чтобы
   timeline-овский * { margin:0 } НЕ перебивал .btn { margin-top:11em }). */
@layer norm, timeline, close, video-frame, help, menu, end, scheme, custom-scroll, overlay, dot-info-pop, main, font-face, base;

@import "norm.css";
@import "vars.css";
@import "components/things.css";
@import "components/scheme-timeline.css";
@import "components/overlay.css";
@import "components/dot-pop.css";
@import "components/video.css";
@import "main.css";

@layer font-face{
  @font-face {
    font-family: "Peridot";
    src: url("../fonts/peridot.otf") format("opentype");
  }
}

@layer base{
  html {
    height: 100dvh;
    width: 100vw;
  }

  body {
    height: 100dvh;
    width: 100vw;
    font:500 1.04vw/1.4 var(--font);
    user-select: none;
    background:#000;
  }
  @media (min-aspect-ratio: 16/9) {
    body {
      font-size:1.85vh;
    }
  }

  #wrap {
    position: relative;
    width:100%;
    height:100%;
    overflow:hidden;
  }

  /* На секунду страница становится прокручиваемой — только так Safari на
     айфоне сворачивает свои панели. Класс вешает и снимает shrinkMobileBars
     в js/modules/page/view.js. */
  html.bars-hack,
  html.bars-hack body{
    height:auto;
    min-height:calc(100dvh + 5em);
    overflow:auto;
  }
}