*{box-sizing:border-box}body{margin:0;background:#0b0d0d;color:#e5dcc4;font-family:Georgia,'Songti SC',serif}main{max-width:1760px;margin:auto;padding:24px 34px}header,footer{display:flex;align-items:center;justify-content:space-between;gap:20px;font:11px sans-serif;letter-spacing:2px;color:#888b80}header{height:64px}.brand{font:23px serif;color:#e9dfbe;letter-spacing:4px}.brand small{font:8px sans-serif;display:block;letter-spacing:3px;margin-top:7px}header b{color:#c8bea4;margin-left:14px;font-weight:400}#system{letter-spacing:1px;color:#a8bc91}#stage{position:relative;aspect-ratio:16/9;overflow:hidden;border:1px solid #494238;background:#111017}canvas{width:100%;height:100%;display:block}.vignette{position:absolute;inset:0;box-shadow:inset 0 0 120px 45px #0009;pointer-events:none}#top{position:absolute;top:28px;left:32px;right:32px;display:flex;justify-content:space-between;font:11px sans-serif;letter-spacing:2px;color:#c6b89a}#title{position:absolute;inset:15% 10% auto;text-align:center;text-shadow:0 4px 20px #000}#title p{font-size:12px;letter-spacing:5px;color:#c1b294}h1{font-size:clamp(28px,5vw,83px);line-height:1.06;letter-spacing:5px;margin:24px 0 12px;color:#eee2b7}h2{font-size:20px;letter-spacing:12px;font-weight:400}.line{width:40px;background:#9d916d;height:1px;margin:25px auto}#title span{font-size:12px;letter-spacing:6px;color:#afa38b}#prompt{position:absolute;bottom:7%;left:22%;right:22%;text-align:center;text-shadow:0 2px 8px #000}#english{color:#a4c78c;font:10px sans-serif;letter-spacing:4px}h3{font-size:22px;font-weight:400;letter-spacing:4px;margin:12px 0}#detail{font:11px/1.7 sans-serif;color:#bdb59e;letter-spacing:1px}#meter{width:150px;height:2px;background:#45463a;margin:19px auto}#meter i{display:block;width:0;height:100%;background:#b9e99c;box-shadow:0 0 12px #87dc80}aside{position:absolute;right:22px;bottom:24px;width:112px;border:1px solid #b4ab6a44;background:#080a09}video{width:100%;aspect-ratio:4/3;object-fit:cover;transform:scaleX(-1);opacity:.55}aside span{display:block;font:9px sans-serif;text-align:center;padding:6px;color:#a0ac8e}footer{height:52px;font-size:9px;letter-spacing:1px}footer i{color:#93b97d;font-size:7px;margin-left:10px}#error{position:absolute;inset:20%;padding:30px;text-align:center;background:#101210f2;border:1px solid #7d7759}#error h2{letter-spacing:2px}#error p{font:14px/2 sans-serif}button{padding:12px 24px;background:#c8d4aa;border:0;color:#151911;cursor:pointer}@media(max-width:700px){main{padding:8px}header{height:65px}header>span:nth-child(2),footer>span:last-child{display:none}.brand{font-size:17px}#system{font-size:9px}#top{top:14px;left:14px;right:14px;font-size:8px}aside{width:64px;bottom:10px;right:10px}#prompt{bottom:2%;left:15%;right:15%}h3{font-size:14px;margin:6px}#detail{font-size:9px}#english{font-size:8px}#title{top:11%}#title p,.line,#title>span{display:none}h1{margin:10px}h2{font-size:12px}footer{font-size:8px}#error{inset:5%}}
#startButton {
  margin: 12px auto 4px;
  padding: 14px 32px;
  border: 1px solid #a4c78c;
  background: #20271f;
  color: #e5dcc4;
  font: 14px Georgia, 'Songti SC', serif;
  letter-spacing: 3px;
  cursor: pointer;
  transition: background .2s, box-shadow .2s;
}

#startButton:hover {
  background: #35432c;
  box-shadow: 0 0 20px #a4c78c44;
}

#startButton:focus-visible {
  outline: 2px solid #d5e8ba;
  outline-offset: 4px;
}

#startButton[hidden] {
  display: none;
}