* { box-sizing: border-box; }

.info-page {
  min-height: 100vh;
  margin: 0;
  padding: clamp(18px, 4vw, 48px) 16px 30px;
  overflow: auto;
  background: radial-gradient(ellipse at 50% 0%, #263040 0, #11151c 48%, #090b0f 100%);
  color: #f7f5ef;
  font-family: 'M PLUS Rounded 1c', 'Yu Gothic', Meiryo, sans-serif;
  line-height: 1.75;
  user-select: text;
  -webkit-user-select: text;
}

.info-shell { width: min(100%, 880px); margin: 0 auto; }
.info-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; margin: 0 0 14px; }
.info-nav a { color: #f7f5ef; font-weight: 800; text-underline-offset: 4px; }
.info-nav a:hover, .info-nav a:focus-visible { color: #ffd84a; }
.info-site-link { margin-left: auto; }

.info-card {
  margin: 16px 0;
  padding: clamp(22px, 5vw, 48px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 18px;
  background: rgba(16, 19, 25, 0.92);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
}

.info-kicker {
  margin: 0 0 8px;
  color: #ffd84a;
  font: 12px/1.4 'Dela Gothic One', 'Yu Gothic', sans-serif;
  letter-spacing: 0.13em;
}

.info-page h1, .info-page h2, .info-page h3 {
  color: #fff;
  font-family: 'Dela Gothic One', 'Yu Gothic', sans-serif;
  font-weight: 400;
  line-height: 1.35;
}
.info-page h1 { margin: 0; font-size: clamp(30px, 6vw, 48px); text-shadow: 0 3px 0 #8d2c24; }
.info-lead { margin: 14px 0 30px; color: #d8dce2; font-size: 16px; }
.info-page h2 { margin: 0 0 13px; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 216, 74, 0.35); font-size: clamp(20px, 4vw, 25px); }
.info-page h3 { margin: 0 0 8px; font-size: 19px; }
.info-page p { margin: 10px 0; }
.info-page ul, .info-page ol { margin: 8px 0; padding-left: 1.25em; }
.info-page li + li { margin-top: 5px; }
.info-page a { color: #ffd84a; text-underline-offset: 3px; overflow-wrap: anywhere; }
.info-page a:hover, .info-page a:focus-visible { color: #fff; }
.info-page code { padding: 0.08em 0.35em; border-radius: 5px; background: rgba(255, 255, 255, 0.1); color: #f3e5b4; font: 0.92em ui-monospace, Consolas, monospace; }

.info-subcard {
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
}
.info-credit, .info-muted { color: #aeb5c0; font-size: 14px; }
.info-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 8px; }
.info-list { display: grid; gap: 12px; }
.info-list li { padding-left: 3px; }
.info-list li::marker { color: #ffd84a; }
.info-control-group { margin-top: 14px; padding: 16px; border: 1px solid rgba(255, 255, 255, 0.11); border-radius: 12px; background: rgba(255, 255, 255, 0.035); }
.info-note { padding: 10px 12px; border-left: 3px solid #ffd84a; border-radius: 0 8px 8px 0; background: rgba(255, 216, 74, 0.07); color: #e8e2cf; }
.info-license { margin-top: 14px; }
.info-license summary { width: fit-content; color: #ffd84a; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.info-license pre {
  max-width: 100%;
  margin: 12px 0 0;
  padding: 16px;
  overflow: auto;
  border-radius: 8px;
  background: #090b0f;
  color: #dfe3e8;
  font: 12px/1.6 ui-monospace, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.info-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 34px; }
.info-button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border: 2px solid #c0392b;
  border-radius: 999px;
  background: #c0392b;
  color: #fff !important;
  font-weight: 800;
  text-decoration: none;
}
.info-button:hover, .info-button:focus-visible { border-color: #e05243; background: #e05243; }
.info-button-secondary { border-color: rgba(255, 255, 255, 0.5); background: transparent; }
.info-button-secondary:hover, .info-button-secondary:focus-visible { border-color: #ffd84a; background: rgba(255, 216, 74, 0.08); }
.info-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; padding-top: 18px; color: #858d98; font: 12px/1.4 'Dela Gothic One', sans-serif; letter-spacing: 0.12em; text-align: center; }
.info-footer a { color: #c4ccd6; text-underline-offset: 4px; }
.info-footer a:hover, .info-footer a:focus-visible { color: #ffd84a; }

@media (max-width: 520px) {
  .info-page { padding: 16px 12px 24px; }
  .info-card { border-radius: 14px; }
  .info-subcard { padding: 14px; }
  .info-card p, .info-list, .info-control-group { font-size: 15px; }
  .info-actions { flex-direction: column; }
  .info-button { width: 100%; }
}