.studio-page {
  background:#e8e8df;
  min-height:100svh;
  display:flex;
  flex-direction:column
}

.studio-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:26px 40px;
  border-bottom:1px solid #cdd1c0;
  gap:20px
}

.studio-header>span {
  font-size:9px;
  letter-spacing:.12em;
  color:#7c826e
}

.studio-back {
  font-size:14px
}

.studio-main {
  flex:1;
  min-height:660px;
  position:relative;
  display:flex;
  flex-direction:column;
  isolation:isolate
}

.studio-intro {
  position:absolute;
  z-index:2;
  top:50px;
  left:40px;
  pointer-events:none
}

.studio-intro h1 {
  font-size:56px;
  letter-spacing:-.05em;
  line-height:1.07;
  margin-top:20px
}

.studio-intro>p:last-child {
  font-size:16px;
  line-height:1.65;
  color:#6c755e;
  margin-top:23px
}

.studio-scene {
  min-height:570px;
  flex:1;
  width:75%;
  margin-left:auto;
  position:relative
}

.studio-scene:before {
  content:'';
  position:absolute;
  width:500px;
  height:500px;
  max-width:90%;
  max-height:90%;
  border:1px solid #cdd3bf;
  border-radius:50%;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:-1
}

.studio-bottom {
  padding:20px 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px
}

.studio-views {
  display:flex;
  gap:7px;
  background:#dce0d0;
  padding:5px;
  border-radius:6px
}

.studio-views button {
  border:0;
  background:transparent;
  border-radius:4px;
  padding:14px 20px;
  font-size:14px
}

.studio-views button.active {
  background:var(--ink);
  color:var(--paper)
}

.studio-pause {
  background:none;
  border:0;
  border-bottom:1px solid #b2baa2;
  padding:12px 0;
  font-size:14px
}

.studio-footer {
  display:flex;
  justify-content:space-between;
  padding:24px 40px;
  border-top:1px solid #cdd1c0;
  gap:25px;
  font-size:13px;
  color:#6a745c
}

.studio-footer>a {
  color:var(--ink)
}

.studio-page .scene-fallback {
  max-width:650px;
  left:50%;
  transform:translateX(-50%);
  width:100%
}

.studio-page .fallback-browser {
  height:280px
}

.studio-page .fallback-phone {
  bottom:15%;
  height:240px
}

@media(max-width:900px) {
  .studio-intro h1 {
    font-size:44px
  }

  .studio-intro {
    top:35px
  }

  .studio-scene {
    width:100%;
    margin-top:50px
  }

  .studio-intro>p:last-child {
    font-size:16px
  }

  .studio-views button {
    padding:12px;
    font-size:14px
  }

}

@media(max-width:600px) {
  .studio-header {
    padding:20px
  }

  .studio-header>span {
    display:none
  }

  .studio-back {
    font-size:14px
  }

  .studio-main {
    min-height:0
  }

  .studio-intro {
    position:relative;
    left:auto;
    top:auto;
    padding:30px 20px 0
  }

  .studio-intro h1 {
    font-size:46px;
    margin-top:16px
  }

  .studio-intro>p:last-child {
    font-size:16px;
    margin-top:15px
  }

  .studio-scene {
    margin-top:0;
    min-height:360px
  }

  .studio-bottom {
    padding:10px 20px 25px;
    flex-direction:column;
    gap:12px
  }

  .studio-views {
    width:100%
  }

  .studio-views button {
    flex:1;
    font-size:14px;
    padding:13px 7px;
    white-space:nowrap
  }

  .studio-footer {
    padding:20px;
    flex-wrap:wrap;
    gap:12px;
    font-size:13px
  }

  .studio-footer>span:nth-child(2) {
    display:none
  }

  .studio-footer>a {
    margin-left:auto
  }

  .studio-page .fallback-browser {
    height:190px
  }

  .studio-page .fallback-phone {
    height:180px
  }

}

.studio-views button { white-space:normal; line-height:1.4; }
.studio-footer { flex-wrap:wrap; }
@media (max-width:600px) {
  .studio-views button { font-size:13px; padding:12px 8px; }
  .studio-intro { padding-top:28px; }
}