[hidden] {
  display: none !important;
}

:root {
  color-scheme: light;
  --px: 0;
  --py: 0;
}

body {
  margin: 0;
  min-height: 100vh;
  color: #1c1917;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

.scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #87b8e8;
  container-type: size;
  container-name: frame;
}

.layer,
.corner {
  position: absolute;
}

.artboard {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100vh;
  width: calc(100vh * 3840 / 1240);
  transform: translate(-50%, -50%);
}

.bg {
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}

.beam {
  z-index: 2;
  left: 50%;
  top: 6%;
  height: 78%;
  width: auto;
  max-width: none;
  transform: translate(calc(-50% + var(--px) * 9px), calc(var(--py) * 9px));
}

.vignette {
  z-index: 3;
  inset: 0;
  opacity: 0.8;
  --vignette-scale: min(min(100cqw, 100cqh) / 430, max(100cqw, 100cqh) / 920);
  background: radial-gradient(
    ellipse calc(1070 * var(--vignette-scale)) calc(434 * var(--vignette-scale)) at 50% 50%,
    rgb(0 0 0 / 0) 0%,
    #000 53%,
    #000 100%
  );
}

.corner {
  z-index: 4;
  --corner-scale: min(min(100cqw, 100cqh) / 1000, max(100cqw, 100cqh) / 2000);
  width: calc(110 * var(--corner-scale));
  height: calc(110 * var(--corner-scale));
}

.corner.tl {
  top: calc(55 * var(--corner-scale));
  left: calc(55 * var(--corner-scale));
  transform: translate(calc(var(--px) * 2px), calc(var(--py) * 2px));
}

.corner.tr {
  top: calc(55 * var(--corner-scale));
  right: calc(55 * var(--corner-scale));
  transform: translate(calc(var(--px) * 2px), calc(var(--py) * 2px)) rotate(90deg);
}

.corner.br {
  right: calc(55 * var(--corner-scale));
  bottom: calc(55 * var(--corner-scale));
  transform: translate(calc(var(--px) * 2px), calc(var(--py) * 2px)) rotate(180deg);
}

.corner.bl {
  left: calc(55 * var(--corner-scale));
  bottom: calc(55 * var(--corner-scale));
  transform: translate(calc(var(--px) * 2px), calc(var(--py) * 2px)) rotate(270deg);
}

.page {
  position: relative;
  z-index: 5;
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.25rem 1.25rem 1.5rem;
}

.stage {
  flex: 1;
  width: min(100%, 28rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.mark {
  width: calc(min(100%, 28rem) * 0.6);
  line-height: 0;
}

.mark img {
  width: 100%;
  height: auto;
}

.drone {
  width: min(62vw, 320px);
  height: auto;
  pointer-events: none;
  transform-origin: center;
  transform:
    perspective(800px)
    translate3d(calc(var(--px) * 1px), calc(var(--py) * 1px), 0)
    rotateX(calc(var(--py) * -1deg))
    rotateY(calc(var(--px) * 1.5deg));
}

.logo {
  width: min(78vw, 440px);
  height: auto;
  transform: translate(calc(var(--px) * 5px), calc(var(--py) * 5px));
}

.panel {
  width: 100%;
  box-sizing: border-box;
  display: grid;
  gap: 0.75rem;
  padding: 1.25rem 1.25rem 1.35rem;
  background: rgba(250, 250, 249, 0.72);
  border-radius: 0.6rem;
}

label,
input,
button {
  font: inherit;
}

input,
button {
  width: 100%;
  box-sizing: border-box;
}

input {
  color: #1c1917;
  background: #fff;
  border: 1px solid #d6d3d1;
  border-radius: 0.25rem;
  padding: 0.55rem 0.7rem;
}

button {
  color: #fafaf9;
  background: #1c1917;
  border: 0;
  border-radius: 0.25rem;
  padding: 0.6rem 0.7rem;
  cursor: pointer;
}

h1,
p {
  margin: 0;
}

h1 {
  font-size: 1.35rem;
  line-height: 1.25;
}

.lede,
.message {
  margin: 0;
}

.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}