:root {
  color-scheme: dark;
  font-family: Inter, "Noto Sans JP", system-ui, sans-serif;
  background: #080a12;
  color: #f4f7ff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at 20% 0%, #302469 0, transparent 38rem), #080a12;
}

main { width: min(58rem, calc(100% - 2rem)); margin: 0 auto; padding: 3rem 0 5rem; }
header { margin-bottom: 1.5rem; }
h1 { margin: .15rem 0; font-size: clamp(2.6rem, 9vw, 5.4rem); letter-spacing: -.06em; }
h2 { margin-top: 0; }
.eyebrow { color: #9f92ff; font-weight: 800; letter-spacing: .16em; }
.test-banner, .panel { border: 1px solid #34394d; border-radius: 1rem; padding: 1.2rem; margin: 1rem 0; background: #111522e8; }
.test-banner { display: grid; gap: .35rem; border-color: #f2b84b; color: #ffe6ae; }
.offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; }
.offer { border: 1px solid #3c4462; border-radius: .8rem; padding: 1rem; background: #181d2e; }
.offer h3 { margin: 0 0 .5rem; }
.price { font-size: 1.6rem; font-weight: 800; }
button, .download { border: 0; border-radius: .55rem; padding: .7rem 1rem; background: #7868ff; color: white; font-weight: 800; cursor: pointer; text-decoration: none; display: inline-block; }
button:disabled { opacity: .5; cursor: wait; }
.secret-row { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; }
code { max-width: 100%; overflow-wrap: anywhere; padding: .75rem; border-radius: .4rem; background: #050710; color: #9fffd0; }
.hint { color: #aab2c8; }
.hidden { display: none; }
.error { color: #ff9fae; }