:root { color-scheme: light; font-family: Arial, Helvetica, sans-serif; color: #11100f; background: #fefbf5; }
* { box-sizing: border-box; } [hidden] { display: none !important; }
body { margin: 0; } nav { display: flex; align-items: center; justify-content: flex-end; gap: 12px; height: 54px; padding: 5px; }
a { color: inherit; text-decoration: none; } #name { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#name:hover { text-decoration: underline; }
.button { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 18px; border: 1px solid #aaa49b; border-radius: 3px; background: transparent; font: 700 14px Arial, sans-serif; color: inherit; cursor: pointer; }
.button:hover { background: #f5f0e8; } .primary { background: #154ebb; border-color: #154ebb; color: white; } .primary:hover { background: #0e3d9a; }
:focus-visible { outline: 3px solid #f06421; outline-offset: 2px; } .button:disabled { opacity: .6; cursor: wait; }
@media (max-width: 220px) { nav { gap: 8px; } .button { padding-inline: 10px; } #name { font-size: 13px; } }