* {
  box-sizing:border-box
}
body {
  margin:0;
  background:#202124;
  color:#f5f1e6;
  font:15px 'Segoe UI',sans-serif
}
main {
  max-width:1500px;
  padding:28px;
  margin:auto
}
h1 {
  font-size:25px
}
p {
  color:#c0b9a6;
  line-height:1.6
}
a {
  color:#e6b84c
}
.controls {
  display:flex;
  align-items:end;
  gap:14px;
  flex-wrap:wrap;
  margin:20px 0
}
label {
  display:block;
  font-size:12px;
  color:#c0b9a6;
  margin-bottom:7px
}
input,select,button {
  font:inherit;
  border:1px solid #62583e;
  border-radius:7px;
  padding:10px;
  background:#292a2d;
  color:#fff
}
button {
  background:#e6b84c;
  color:#171a20;
  font-weight:700;
  cursor:pointer
}
.frame {
  width:100%;
  overflow:hidden;
  border-radius:10px;
  outline:1px solid #514b3b
}
.canvas {
  position:relative;
  width:1920px;
  height:1080px;
  transform-origin:top left;
  background:radial-gradient(ellipse at 70% 30%,#33302a,#252629 75%)
}
.game {
  position:absolute;
  left:24px;
  top:0;
  width:1533px;
  height:1080px;
  background:linear-gradient(145deg,#172f35,#243c48 50%,#172c3a);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px dashed #78a8b77a;
  color:#d5eef0
}
.game h2 {
  font-size:45px;
  margin:0 0 15px
}
.game p {
  font-size:24px;
  color:#abcbd1;
  margin:8px
}
.game .badge {
  font-size:16px;
  color:#9ab5ba;
  letter-spacing:3px;
  margin-bottom:30px
}
.side {
  position:absolute;
  left:1581px;
  top:24px;
  width:315px;
  height:1032px;
  border:0;
  background:transparent
}
.hint {
  position:absolute;
  left:1581px;
  top:850px;
  width:315px;
  color:#6e819b;
  font-size:18px;
  line-height:1.6;
  border-top:1px solid #ffffff16;
  padding-top:18px
}
.specs {
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  margin-top:18px;
  color:#b6c3d7;
  font-size:13px
}
.specs b {
  color:#e6b84c
}
.notice {
  font-size:12px
}