*{box-sizing:border-box}
:root{color-scheme:light;--ink:#183127;--accent:#d4f597;--border:#d9e4d9}
body{margin:0;background:#f6f8f3;color:var(--ink);font:16px/1.5 system-ui,sans-serif}
header,main,footer{width:min(1120px,calc(100% - 32px));margin:auto}
header{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.brand{color:inherit;text-decoration:none;font-weight:800}
.hero{padding:clamp(22px,5vw,54px);background:var(--ink);color:white;border-radius:22px}
h1{font-size:clamp(30px,5vw,56px);line-height:1.1;margin:0}
input,button,select{font:inherit;color:inherit}
input{width:min(100%,600px);padding:12px 16px;border:0;border-radius:10px;color:var(--ink);background:white}
button,select{background:white;border:1px solid var(--border);border-radius:9px;padding:7px 12px;cursor:pointer}
:focus-visible{outline:3px solid #589330;outline-offset:3px}
nav{display:flex;gap:8px;overflow:auto;padding:18px 4px 8px}
nav button{white-space:nowrap}
nav button[aria-pressed=true],#more{background:var(--accent);border-color:#a0bc73}
#count{font-size:16px;font-weight:650}
#grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px}
article{display:grid;background:white;border:1px solid var(--border);border-radius:12px;overflow:hidden}
article button{border:0;border-radius:0}
article button:hover{background:#eff7df}
.tile{min-height:88px;display:grid;justify-items:center;align-content:center;gap:3px}
.glyph,#symbol{font-size:34px}
.label{font-size:12px;line-height:1.25;overflow-wrap:anywhere}
.detail{border-block-start:1px solid var(--border);font-size:12px}
#more{margin-block:20px}
footer{padding:20px 0;color:#4c6455}
#status:not(:empty){position:fixed;inset:auto 16px 16px;padding:10px;border-radius:10px;margin:auto;width:max-content;max-width:calc(100% - 32px);background:var(--ink);color:white}
dialog{border:1px solid var(--border);border-radius:16px;color:var(--ink);max-width:min(480px,90vw)}
dialog::backdrop{background:#18312770}
.pages{width:min(1120px,calc(100% - 32px));margin:0 auto 14px;display:flex;gap:8px;flex-wrap:wrap}
.pages a{color:inherit;text-decoration:none;background:white;border:1px solid var(--border);border-radius:9px;padding:7px 12px}
.pages a[aria-current=page]{background:var(--accent);border-color:#a0bc73}
#shortcuts dt{font-weight:700;margin-block-start:8px}
#shortcuts dd{margin-inline-start:0}

.brand{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.brand-mark{flex:none}
.brand-name{font-size:clamp(16px,4vw,21px);font-weight:850;letter-spacing:-.045em;line-height:1}
.brand-name span{color:#3e674a}