body {
  margin: 0;
  background: #8c8;
  font-family: system-ui, sans-serif;
}

/* SVG */
svg {
  margin-top: -15px;
  width: 100vw;
  height: 230px;
  background: linear-gradient(150deg,#fff,#fff,#07c,#07c);
  border-bottom: ridge 3px #131;
}

/* フォーム */
form {
  width: 360px;
  margin: 20px auto;
  text-align: center;
}

input[type="number"] {
  min-width: 200px;
  padding-left: 30px;
  font-size: 50px;
  border-radius: 20px;
}

input[type="submit"] {
  zoom: 2.5;
  margin: 8px;
}

input:disabled {
  opacity: .4;
}

.error {
  height: 40px;
  font-weight: bold;
  color: #33f;
}

/* 表示エリア */
.viewer {
  width: 100%;
  max-width: 1000px;
  height: 600px;
  margin: 20px auto;
  overflow: hidden;
  background: #fff;
  border: 1px solid #444;
  position: relative;
}

.viewer img {
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  display: block;
}

/* サイズ表示 */
.meta {
  position: absolute;
  right: 8px;
  bottom: 8px;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: 14px;
  padding: 4px 8px;
  border-radius: 6px;
}

/* エラー */
.viewer.error {
  background: #fee;
}

.viewer.error::after {
  content: "画像を取得できません";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 24px;
  color: #900;
}