@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@10..48,500..800&family=Hanken+Grotesk:wght@300..700&family=Space+Mono:wght@400;700&display=swap');
* { box-sizing: border-box; margin: 0; padding: 0; }
:root { color-scheme: light; }
body {
  font-family: 'Hanken Grotesk', system-ui, sans-serif; color: #000;
  background: #fffdf2; background-image: radial-gradient(#0000000d 1.4px, transparent 1.4px);
  background-size: 22px 22px; min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 22px; -webkit-tap-highlight-color: transparent;
}
.wrap { width: 100%; max-width: 560px; }
.brand { font-family: 'Space Mono', monospace; font-weight: 700; font-size: 14px; letter-spacing: .06em; }
.dot { display:inline-block; width:9px; height:9px; border-radius:50%; background:#defc52; border:1.5px solid #000; margin-right:7px; vertical-align:middle; }
.cardstage { position: relative; height: 168px; margin: 30px 0 8px; }
.card { position:absolute; width:210px; height:130px; border:2.5px solid #000; border-radius:16px; box-shadow:5px 5px 0 #000; }
.card.back { left:40px; top:20px; background:#fff; transform:rotate(-7deg); }
.card.front { left:70px; top:6px; background:#defc52; transform:rotate(4deg); padding:16px; }
.card .term { font-family:'Bricolage Grotesque',sans-serif; font-weight:700; font-size:24px; }
.card .ipa { font-family:'Space Mono',monospace; font-size:12px; opacity:.6; margin-top:4px; }
.card .tr { font-size:15px; margin-top:14px; }
h1 { font-family:'Bricolage Grotesque',sans-serif; font-weight:800; font-size:34px; line-height:1.05; letter-spacing:-.02em; margin-top:18px; }
h1 .hl { background:#defc52; box-shadow:0 0 0 2px #000; border-radius:6px; padding:0 5px; }
.sub { opacity:.72; font-size:16px; line-height:1.5; margin-top:16px; }
.meta { font-family:'Space Mono',monospace; font-size:12px; opacity:.6; margin-top:16px; }
.cta { display:inline-block; margin-top:24px; background:#defc52; color:#000; border:2.5px solid #000;
  border-radius:14px; padding:15px 26px; font-weight:700; font-size:16px; text-decoration:none; box-shadow:4px 4px 0 #000; }
.cta:active { transform: translate(2px,2px); box-shadow:2px 2px 0 #000; }
footer { margin-top:34px; font-family:'Space Mono',monospace; font-size:13px; opacity:.7; }
footer a { color:#000; }
footer a[aria-current="true"] { font-weight:700; text-decoration:none; }
@media (min-width:600px) { h1 { font-size:42px; } }