:root { color-scheme: dark; --bg:#070b1a; --text:#f1f5ff; --muted:#9fb0d9; --ice:#8fe3ff; --purple:#8b5cf6; --line:#243061; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; color:var(--text); font:1rem/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background: radial-gradient(60rem 30rem at 50% -10%, rgba(139,92,246,.28), transparent 70%), radial-gradient(40rem 24rem at 0% 100%, rgba(200,16,46,.2), transparent 70%), var(--bg); background-attachment: fixed; }
main { max-width: 40rem; margin: 0 auto; padding: 4rem 1.25rem; }
h1 { font-size: clamp(2.6rem,12vw,4.5rem); font-style: italic; text-transform: uppercase; font-weight: 900; margin: 0; text-shadow: 0 0 28px rgba(139,92,246,.55); }
.lede, .made { color: var(--muted); }
a { color: var(--ice); }
:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 6px; }
.cards { list-style: none; padding: 0; margin: 2rem 0; display: grid; gap: 1rem; }
.card { position: relative; display: block; text-decoration: none; color: var(--text); background: #0f1630; border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem 1.25rem; transition: border-color .3s ease; }
.card:hover { border-color: var(--ice); }
.card strong { display: block; font-size: 1.2rem; }
.card span { color: var(--muted); }
.card em { position: absolute; top: .8rem; right: 1rem; font-style: normal; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: var(--purple); border-radius: 999px; padding: .1rem .6rem; }