:root{color-scheme:dark;background:#050b17;color:#f4f8ff;font:17px/1.6 system-ui}
*{box-sizing:border-box;overflow-wrap:anywhere}
body{margin:0}
.skip{position:absolute;left:12px;top:-100px;background:#f6c77f;color:#050b17;padding:8px 12px;z-index:2}
.skip:focus{top:12px}
header,main,footer{max-width:900px;margin:auto;padding:20px}
header{border-bottom:1px solid #7692b4}
footer{border-top:1px solid #7692b4;color:#a9bad2}
h1,h2,h3{font-family:Georgia,'Times New Roman',serif;line-height:1.25}
h1,h2{color:#00d5ff}
nav ul{display:flex;flex-wrap:wrap;gap:8px 24px;list-style:none;padding:0}
a{color:#00d5ff}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid #f6c77f;outline-offset:3px}
.notice{border-left:4px solid #f6c77f;padding:10px 14px;background:#101d31}
.eyebrow,.meta{color:#a9bad2}
.cards{display:grid;gap:18px}
.card,.detail{border:1px solid #7692b4;border-radius:6px;padding:18px;background:#0b172a}
.card h3,.detail h2{margin-top:0}
label{display:block;margin:16px 0 5px}
input,select{width:100%;max-width:100%;min-height:48px;padding:10px 12px;border:1px solid #a9bad2;border-radius:5px;background:#0b172a;color:#f4f8ff;font:inherit}
#matchCount{margin-top:20px;font-weight:650}
button{min-height:48px;padding:10px 16px;border:1px solid #a9bad2;border-radius:5px;background:#0b172a;color:#f4f8ff;font:inherit;cursor:pointer}
[hidden]{display:none!important}
@media(max-width:600px){header,main,footer{padding:14px}.card,.detail{padding:14px}nav ul{display:block}nav li{margin:6px 0}}