.mana-bar{block-size:var(--spacing-xs);border-radius:var(--radius-pill);background-color:var(--color-surface-sunken);overflow:hidden}.mana-bar__fill{border-radius:var(--radius-pill);background-color:var(--color-brand);block-size:100%;transition:inline-size var(--motion-enter) var(--ease-standard)}.mana-bar--earn .mana-bar__fill{background-color:var(--color-accent)}.mana-pill{align-items:center;gap:var(--spacing-xs);min-inline-size:0;padding-block:var(--spacing-xs);padding-inline:var(--spacing-sm);border:2px solid var(--color-border-strong);border-radius:var(--radius-pill);background-color:var(--color-surface-raised);color:var(--color-ink);display:flex}.mana-pill:hover{background-color:var(--color-surface-sunken)}.mana-pill__track{min-inline-size:var(--spacing-xl);flex:auto;display:block}.mana-pill time{text-overflow:ellipsis;min-inline-size:0;overflow:hidden}.mana-dock{z-index:10;padding-block:var(--spacing-xs);background-color:var(--color-surface);background-image:var(--texture-grain);position:sticky;inset-block-start:0}