:root {
  font-family: Georgia, 'Times New Roman', serif;
  color: #f3f3f3;
  background: #050505;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }

main {
  display: grid;
  grid-template-rows: auto minmax(360px, 1fr) auto;
  min-height: 100vh;
  min-height: 100svh;
  padding: 32px clamp(24px, 5vw, 72px) 28px;
}

.page-header,
.page-footer { position: relative; z-index: 1; }
.page-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.wordmark { display: block; width: 179px; height: 18px; }
.page-label { color: #858585; font-size: 11px; letter-spacing: .19em; text-transform: uppercase; white-space: nowrap; }

.scene { display: grid; place-items: center; min-height: 360px; perspective: 900px; }
.phone-box {
  position: relative;
  width: 180px;
  height: 326px;
  transform-style: preserve-3d;
  transform: rotateX(-12deg) rotateY(20deg);
  transition: transform 75ms linear;
}
.face { position: absolute; backface-visibility: hidden; border: 1px solid #868686; }
.front,
.back { inset: 0; border-radius: 20px; }
.front {
  transform: translateZ(10px);
  background: linear-gradient(135deg, #737373 0%, #3d3d3d 28%, #1b1b1b 72%, #111 100%);
  box-shadow: inset 0 0 0 7px #1a1a1a, inset 0 0 0 9px #666, 14px 26px 48px #000;
}
.front::after {
  content: '';
  position: absolute;
  top: 12px;
  left: calc(50% - 15px);
  width: 30px;
  height: 4px;
  border-radius: 4px;
  background: #aaa;
}
.back { transform: rotateY(180deg) translateZ(10px); background: linear-gradient(145deg, #797979, #2c2c2c); }
.left,
.right { top: 20px; bottom: 20px; width: 20px; background: linear-gradient(#5b5b5b, #1d1d1d); }
.left { left: -10px; transform: rotateY(-90deg); }
.right { right: -10px; transform: rotateY(90deg); }
.top,
.bottom { left: 20px; right: 20px; height: 20px; background: #777; }
.top { top: -10px; transform: rotateX(90deg); }
.bottom { bottom: -10px; transform: rotateX(-90deg); }

.page-footer { text-align: center; }
.status { min-height: 20px; margin: 0 0 14px; color: #c6c6c6; font-size: 14px; }
.instruction { margin: 0 0 8px; color: #777; font-size: 12px; letter-spacing: .03em; }
.phone-link {
  display: inline-block;
  max-width: 100%;
  color: #e9e9e9;
  font-size: 12px;
  overflow-wrap: anywhere;
  text-underline-offset: 4px;
}
.phone-link:hover { color: #fff; }
.host-setup { max-width: 330px; margin: 20px auto 0; text-align: left; }
.host-setup[hidden] { display: none; }
.host-setup label,
.host-setup small { display: block; color: #858585; font-size: 12px; }
.host-setup input {
  width: 100%;
  margin: 7px 0;
  padding: 10px 12px;
  border: 1px solid #555;
  border-radius: 2px;
  outline: 0;
  background: #111;
  color: #eee;
  font: inherit;
}
.host-setup input:focus { border-color: #ddd; }
.host-setup small { line-height: 1.45; }

.phone-page {
  min-height: 0;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}
.phone-page main {
  height: 100%;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}
.controller-content { align-self: center; text-align: center; }
.controller-content h1 { margin: 0 0 12px; font-size: clamp(28px, 7vw, 42px); font-weight: normal; }
.controller-content .instruction { font-size: 15px; letter-spacing: 0; }
.phone-page button {
  margin-top: 32px;
  padding: 13px 28px;
  border: 1px solid #eee;
  border-radius: 2px;
  background: #eee;
  color: #111;
  font: inherit;
  font-size: 16px;
  cursor: pointer;
}
.phone-page button:disabled { opacity: .55; cursor: default; }
.phone-page .status { margin: 0; }

@media (max-width: 560px) {
  main { padding: 24px 20px; }
  .page-header { flex-direction: column; gap: 12px; }
  .page-label { font-size: 10px; }
  .phone-box { width: 150px; height: 272px; }
  .front, .back { border-radius: 17px; }
}

@media (max-height: 560px) {
  .phone-page main { padding-top: 12px; padding-bottom: 12px; }
  .phone-page .page-header { gap: 6px; }
  .phone-page button { margin-top: 14px; }
}