/* Reset only component-library additions absent from the reference. The next
   stylesheet is the designer's byte-for-byte CSS and owns the presentation. */
:where(html[data-v3]) .app, :where(html[data-v3]) .overlay, :where(html[data-v3]) .drawer { font-family: var(--font); }
:where(html[data-v3]) :is(.btn,.badge,.menu,.avatar,.toast,.drawer,.collapse,.tabbar) { min-height: 0; text-transform: none; letter-spacing: inherit; }
:where(html[data-v3]) .btn { animation: none; border-width: 0; box-shadow: none; }
:where(html[data-v3]) .btn::before, :where(html[data-v3]) .btn::after { display: none; }
:where(html[data-v3]) .menu { display: block; flex-wrap: nowrap; width: auto; font-size: inherit; }
:where(html[data-v3]) .avatar { display: grid; }
:where(html[data-v3]) .drawer { display: flex; width: auto; grid-template-columns: none; }
:where(html[data-v3]) .toast { inset: auto; padding: 0; display: flex; flex-direction: row; width: auto; }

:where(html[data-v3]) .hero { display: block; place-items: normal; background-position: 0 0; background-size: auto; }
:where(html[data-v3]) .hero > * { grid-area: auto; }
:where(html[data-v3]) .mhead .stats { grid-auto-flow: row; overflow: visible; background: none; color: inherit; border-radius: 0; }
:where(html[data-v3]) .mhead .stats > :not([hidden]) ~ :not([hidden]) { border-width: 0; }