:root { color-scheme: dark; background: #25282a; color: #fff; font-family: Arial, Helvetica, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; }
main { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; }
.cover { display: block; width: 100%; height: auto; }
.mobile { display: none; }
@media (max-width: 700px) {
  .cover { display: none; }
  .mobile { display: flex; flex-direction: column; width: 100%; min-height: 100vh; min-height: 100svh; }
  .brand { background: #fff; padding: 1.5rem; display: grid; place-items: center; border-bottom: 0.4rem solid #8ab027; }
  .brand img { display: block; width: min(100%, 18rem); height: auto; }
  .notice { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2.5rem 1.25rem; background: linear-gradient(125deg, #303436, #1c1f20); }
  h1 { margin: 0; font-size: clamp(2rem, 8vw, 3.5rem); line-height: 1.12; text-transform: uppercase; font-weight: 900; }
  h1 span { display: block; color: #a8d442; margin-top: 0.35rem; overflow-wrap: anywhere; }
  p { margin: 1.75rem 0 0; font-size: 1.125rem; line-height: 1.5; }
  p::before { content: ''; display: block; width: 5rem; height: 0.2rem; background: #8ab027; margin: 0 auto 1.5rem; }
}