* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  background: #0b0d12; color: #e7e9ee;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  min-height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 24px; padding: 40px 24px;
  max-width: 640px; margin: 0 auto;
}

.logo {
  width: min(560px, 90vw);
  aspect-ratio: 3 / 1;
  height: auto;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,0.5));
}

.play {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px;
  background: #ffffff;
  color: #0b0d12;
  border: 0;
  border-radius: 0;
  font-family: inherit; font-weight: 700; font-size: 18px;
  cursor: pointer;
}
.play:hover  { background: #e6e6e6; }
.play:active { background: #cfcfcf; }
.play:disabled { background: #555; color: #999; cursor: default; }

.status {
  margin: 0; min-height: 18px;
  color: #9aa3b2; font-size: 13px; text-align: center;
}

.manual {
  color: #9aa3b2; font-size: 13px; text-decoration: underline;
}
.manual:hover { color: #fff; }

.steps {
  width: 100%;
  margin-top: 8px;
  border: 1px solid #232838;
  background: #11141c;
  padding: 12px 16px;
  border-radius: 6px;
}
.steps summary {
  cursor: pointer; color: #9aa3b2; font-size: 13px;
  list-style: none;
}
.steps summary::-webkit-details-marker { display: none; }
.steps summary:hover { color: #fff; }
.steps ol {
  margin: 12px 0 0; padding-left: 20px;
  color: #c8ccd4; font-size: 14px; line-height: 1.7;
}
.steps code {
  background: #1a1f2c; padding: 1px 6px; border-radius: 4px;
  font-size: 0.9em; color: #e7e9ee;
}
.small { color: #6f7785; font-size: 12px; margin: 10px 0 0; }