:root{
  --ds-sec-h: 100vh;

  --ds-cell-w: 6.9444vw;
  --ds-cell-h: calc(var(--ds-sec-h) / 10.24);
  --ds-cell: min(var(--ds-cell-w), var(--ds-cell-h));
}
@supports (height: 100svh){
  :root{ --ds-sec-h: 100svh; }
}

:root{ --ds-sec-cut: 0px; }
@supports (height: 100lvh){
  @media (pointer: coarse){
    :root{
      --ds-sec-h: 100lvh;
      --ds-sec-cut: calc(100lvh - 100svh);
    }
  }
}

@media (max-width: 720px){
  :root{ --ds-cell-w: 12.5vw; }
}

.ds-sec{
  position: relative;
  width: 100%;
  height: var(--ds-sec-h);
  overflow: hidden;
}

.ds-sec > :not(.ds-art){
  opacity: var(--ds-sec-show, 1);
}

@media (pointer: coarse){
  .ds-page{ scroll-snap-type: y mandatory; }
  .ds-sec{
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .ds-page.ds-free{ scroll-snap-type: none; }
}

.ds-art{
  position: absolute;
  inset: 0;
  opacity: var(--ds-art-alpha, .75);
}

.ds-art i{
  position: absolute;
  display: block;
  width:  var(--ds-cell);
  height: var(--ds-cell);
}

.ds-art img{
  display: block;
  width: 100%;
  height: auto;
}

.ds-art .r{ background: var(--ds-red,   #E63E3E); }
.ds-art .w{ background: var(--ds-paper, #F0F0F0); }
.ds-art .k{ background: var(--ds-ink,   #171717); }

.ds-art .full{ inset: 0; width: auto; height: auto; }

.ds-art .top1{ top: 0; left: 0; }
.ds-art .top2{ top: 0; left: calc(3 * var(--ds-cell)); }
.ds-art .top3{ top: 0; right: var(--ds-cell); }
.ds-art .top4{ top: var(--ds-cell); left: var(--ds-cell); }
.ds-art .top5{ top: var(--ds-cell); right: 0; }

.ds-art .bot1{ left: 0; bottom: 0; }
.ds-art .bot2{ right: var(--ds-cell); bottom: 0; }

.ds-sec--1 .a{
  right: 0;
  bottom: calc(2 * var(--ds-cell));
  height: calc(2 * var(--ds-cell));
}
.ds-sec--1 .b{
  right: calc(2 * var(--ds-cell));
  bottom: var(--ds-cell);
}
.ds-sec--1 .c{
  right: 0;
  bottom: 0;
  width: calc(2 * var(--ds-cell));
}

.ds-sec--2 .body{
  top: calc(2 * var(--ds-cell));
  left: 0; right: 0; bottom: 0;
  width: auto; height: auto;
}
.ds-sec--2 .row1-l{
  top: var(--ds-cell);
  left: 0; bottom: 0;
  width: calc(2 * var(--ds-cell));
  height: auto;
}
.ds-sec--2 .row1-r{
  top: var(--ds-cell);
  left: calc(3 * var(--ds-cell));
  right: 0; bottom: 0;
  width: auto; height: auto;
}
.ds-sec--2 .row0-q{
  top: 0;
  left: calc(3 * var(--ds-cell));
  height: calc(2 * var(--ds-cell));
}
.ds-sec--2 .row0-r{
  top: 0;
  left: calc(6 * var(--ds-cell));
  right: 0;
  width: auto;
  height: calc(2 * var(--ds-cell));
}

.ds-sec--3 .row0{
  top: 0; left: 0; right: 0;
  width: auto;
}
.ds-sec--3 .w1{ top: 0; left: var(--ds-cell); }
.ds-sec--3 .w2{ top: 0; right: calc(3 * var(--ds-cell)); }
.ds-sec--3 .w3{ top: 0; right: 0; }

.ds-sec--5 .r.full{
  --c: var(--ds-cell);
  --sq: linear-gradient(#000 0 0);

  -webkit-mask-image: var(--sq), var(--sq), var(--sq), var(--sq), var(--sq),
                      var(--sq), var(--sq), var(--sq), var(--sq), var(--sq), var(--sq);
          mask-image: var(--sq), var(--sq), var(--sq), var(--sq), var(--sq),
                      var(--sq), var(--sq), var(--sq), var(--sq), var(--sq), var(--sq);
  -webkit-mask-position:
    left 0 top 0, left calc(3 * var(--c)) top 0, right var(--c) top 0,
    left var(--c) top var(--c), right 0 top var(--c),
    left 0 bottom 0, left calc(3 * var(--c)) bottom 0, right var(--c) bottom 0,
    left var(--c) bottom var(--c), right 0 bottom var(--c),
    0 0;
          mask-position:
    left 0 top 0, left calc(3 * var(--c)) top 0, right var(--c) top 0,
    left var(--c) top var(--c), right 0 top var(--c),
    left 0 bottom 0, left calc(3 * var(--c)) bottom 0, right var(--c) bottom 0,
    left var(--c) bottom var(--c), right 0 bottom var(--c),
    0 0;
  -webkit-mask-size:
    var(--c) var(--c), var(--c) var(--c), var(--c) var(--c), var(--c) var(--c), var(--c) var(--c),
    var(--c) var(--c), var(--c) var(--c), var(--c) var(--c), var(--c) var(--c), var(--c) var(--c),
    100% 100%;
          mask-size:
    var(--c) var(--c), var(--c) var(--c), var(--c) var(--c), var(--c) var(--c), var(--c) var(--c),
    var(--c) var(--c), var(--c) var(--c), var(--c) var(--c), var(--c) var(--c), var(--c) var(--c),
    100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

.ds-sec--7 .w.full{
  --c: var(--ds-cell);
  --sq: linear-gradient(#000 0 0);
  --fade: linear-gradient(to bottom, #000 var(--ds-fade-hold, 100%), transparent 100%);

  -webkit-mask-image: var(--fade),
                      var(--sq), var(--sq), var(--sq), var(--sq), var(--sq),
                      var(--sq), var(--sq), var(--sq), var(--sq);
          mask-image: var(--fade),
                      var(--sq), var(--sq), var(--sq), var(--sq), var(--sq),
                      var(--sq), var(--sq), var(--sq), var(--sq);
  -webkit-mask-position:
    0 0,
    left var(--c) top 0, right calc(3 * var(--c)) top 0, right 0 top 0,
    left 0 top var(--c), right var(--c) top var(--c),
    left 0 bottom 0, right calc(3 * var(--c)) bottom 0, right var(--c) bottom 0,
    right 0 bottom var(--c);
          mask-position:
    0 0,
    left var(--c) top 0, right calc(3 * var(--c)) top 0, right 0 top 0,
    left 0 top var(--c), right var(--c) top var(--c),
    left 0 bottom 0, right calc(3 * var(--c)) bottom 0, right var(--c) bottom 0,
    right 0 bottom var(--c);
  -webkit-mask-size: 100% 100%,
                     var(--c) var(--c), var(--c) var(--c), var(--c) var(--c), var(--c) var(--c), var(--c) var(--c),
                     var(--c) var(--c), var(--c) var(--c), var(--c) var(--c), var(--c) var(--c);
          mask-size: 100% 100%,
                     var(--c) var(--c), var(--c) var(--c), var(--c) var(--c), var(--c) var(--c), var(--c) var(--c),
                     var(--c) var(--c), var(--c) var(--c), var(--c) var(--c), var(--c) var(--c);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-composite: source-out, source-over, source-over, source-over, source-over,
                          source-over, source-over, source-over, source-over, source-over;
          mask-composite: subtract, add, add, add, add, add, add, add, add, add;
}

.ds-sec--8 .ds-art{ --ds-art-alpha: 1; }

.ds-sec--8 .full{
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  z-index: 1;
  pointer-events: none;
  opacity: var(--ds-fade-progress, 0);
}

.ds-sec--6 .w1{ bottom: var(--ds-cell); left: 0; }
.ds-sec--6 .w2{ bottom: var(--ds-cell); right: var(--ds-cell); }
.ds-sec--6 .w3{ bottom: 0; left: var(--ds-cell); }
.ds-sec--6 .w4{ bottom: 0; right: calc(3 * var(--ds-cell)); }
.ds-sec--6 .w5{ bottom: 0; right: 0; }

.ds-back,
.ds-reset{
  position: fixed;
  z-index: 20;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;

  font-family: var(--ds-font-body, system-ui, sans-serif);
  font-size: var(--ds-fs-caption, .8125rem);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;

  color: var(--ds-paper, #F0F0F0);
  background: rgba(23, 23, 23, .85);
  border: 1px solid rgba(240, 240, 240, .24);
  cursor: pointer;

  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);

  transition: background-color .18s ease,
              border-color .18s ease,
              opacity .3s ease,
              transform .3s ease;
}

.ds-back:hover,
.ds-reset:hover{
  background: var(--ds-red, #E63E3E);
  border-color: var(--ds-red, #E63E3E);
}
.ds-back:focus-visible,
.ds-reset:focus-visible{
  outline: 2px solid var(--ds-paper, #F0F0F0);
  outline-offset: 3px;
}

.ds-back{
  top:  clamp(1rem, 2.5vw, 2rem);
  left: clamp(1rem, 2.5vw, 2rem);
  padding: .7em 1.25em;
  min-height: 42px;
  border-radius: 999px;
}

.ds-reset{
  top:   clamp(1rem, 2.5vw, 2rem);
  right: clamp(1rem, 2.5vw, 2rem);
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 50%;
}
.ds-reset__icon{
  display: block;
  width: 20px;
  height: 20px;
  transition: transform .5s var(--ds-ease-out);
}
.ds-reset:hover .ds-reset__icon{ transform: rotate(-180deg); }

.ds-back__icon{
  width: .5rem;
  height: .5rem;
  border-left: 2px solid currentColor;
  border-top:  2px solid currentColor;
}
.ds-back__icon{ transform: rotate(-45deg) translate(1px, 1px); }

@media (max-width: 620px){
  .ds-back__text{ display: none; }
  .ds-back{ width: 44px; height: 44px; padding: 0; min-height: 0; }
  .ds-reset{ width: 42px; height: 42px; }
}

@media (prefers-reduced-motion: reduce){
  .ds-reset__icon{ transition: none; }
}