:root { color-scheme: light dark; font-family: Georgia, ui-serif, serif; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body { padding: 6px; background: #292524; color: #292524; }
main { display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto 7px 7px; gap: 7px 9px; width: 100%; height: 100%; min-height: 60px; padding: 10px; overflow: hidden; border: 1px solid #d6d3d1; border-radius: 4px; background: #fafaf9; box-shadow: inset 5px 0 #f59e0b; }
.glyph { grid-row: 1 / 4; align-self: center; color: #d97706; font: 900 32px/1 ui-monospace, monospace; }
#name { overflow: hidden; font-size: 15px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.rule { height: 3px; align-self: center; border-radius: 2px; background: #a8a29e; }
.rule.two { width: 72%; background: #d6d3d1; }