html { background: #BDB4FF; }
body {
  margin: 0;
  padding: 32px 16px 64px;
  background: #BDB4FF;
  color: #121212;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.55;
}
.wrap { max-width: 720px; margin: 0 auto; }
.win {
  background: #E8E6DF;
  border: 2px solid;
  border-color: #FFFFFF #3A3A3A #3A3A3A #FFFFFF;
  box-shadow: 5px 5px 0 #121212;
  margin-bottom: 28px;
}
.bar {
  background: #2B2BCC;
  color: #FFFFFF;
  font-family: 'Silkscreen', monospace;
  font-size: 13px;
  padding: 6px 10px;
}
.bar.pink { background: #FF4FAE; color: #121212; }
.body { padding: 20px 22px 24px; }
h1 { font-size: 34px; line-height: 1.1; margin: 0 0 10px; }
h2 { font-size: 21px; margin: 28px 0 6px; }
p { margin: 0 0 12px; }
ul { margin: 0 0 12px; padding-left: 22px; }
li { margin-bottom: 6px; }
a { color: #1D1DA6; font-weight: 700; }
a:hover { color: #121212; }
.muted { color: #3F3F3F; font-size: 15px; }
.nav {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-family: 'Silkscreen', monospace; font-size: 13px;
  margin-bottom: 20px;
}
.nav a { color: #121212; text-decoration: none; background: #F6F5F0; padding: 6px 10px;
  border: 2px solid; border-color: #FFFFFF #3A3A3A #3A3A3A #FFFFFF; }
.btn {
  display: inline-block;
  font-family: 'Silkscreen', monospace; font-size: 15px;
  background: #FF4FAE; color: #121212; text-decoration: none;
  padding: 12px 18px;
  border: 2px solid; border-color: #FFFFFF #3A3A3A #3A3A3A #FFFFFF;
  box-shadow: 4px 4px 0 #121212;
}
.btn.lime { background: #C8F542; }
.tag { display: inline-block; background: #121212; color: #C8F542;
  font-family: 'Silkscreen', monospace; font-size: 12px; padding: 4px 8px; margin-bottom: 14px; }
.foot { text-align: center; font-size: 14px; color: #2A2A2A; }
.foot a { color: #121212; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 14px 0; }
.card { background: #F6F5F0; padding: 12px 14px;
  border: 2px solid; border-color: #FFFFFF #3A3A3A #3A3A3A #FFFFFF; }
.card b { display: block; font-family: 'Silkscreen', monospace; font-size: 13px; margin-bottom: 4px; }
.wl { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 4px; }
.wl-label { font-family: 'Silkscreen', monospace; font-size: 13px; }
.wl input { font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 18px; color: #121212;
  background: #FFFFFF; padding: 14px 12px; border: 2px solid; border-color: #3A3A3A #FFFFFF #FFFFFF #3A3A3A;
  border-radius: 0; width: 100%; box-sizing: border-box; }
.wl input:focus { outline: 3px solid #2B2BCC; outline-offset: 1px; }
.wl .btn { cursor: pointer; text-align: center; }
.wl .btn:disabled { opacity: 0.6; cursor: default; }
.wl-done { font-family: 'Silkscreen', monospace; font-size: 18px; background: #C8F542; padding: 12px; margin: 0 0 8px;
  border: 2px solid; border-color: #FFFFFF #3A3A3A #3A3A3A #FFFFFF; }
.hero { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.hero h1 { margin: 0; }
.bud { flex: none; image-rendering: pixelated; }