html, body { font-family: system-ui, Segoe UI, Roboto, sans-serif; }
.page { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
.sidebar { background: #111; color: #eee; padding: 1rem; }
.sidebar a { color: #fff; text-decoration: none; }
.top-row { border-bottom: 1px solid #eee; }
.content { padding: 1rem; }
.controls { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; margin-bottom:1rem; }
.primary { background:#4f46e5; color:#fff; border:none; padding:.5rem 1rem; border-radius:6px; cursor:pointer; }
.draws { display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.rune-card { border:1px solid #ddd; border-radius:10px; padding:1rem; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.06); }
.rune-card img { width:200px; height:200px; object-fit:contain; display:block; margin:0 auto .5rem; }
.tag { font-size:.9rem; color:#b91c1c; margin-left:.25rem; }
.phoneme { color:#555; font-size:.9rem; }
details { margin-top:.25rem; }