@layer rio.defaults, rio.theme, rio.base, rio.components, rio.app;
@layer rio.app {
* { box-sizing: border-box }
body { margin: 0; padding: 1rem; background: var(--rio-bg); color: var(--rio-aa-text-muted); font-family: var(--rio-font-body); line-height: 1.6; overflow-wrap: anywhere }
header, main, footer { max-width: 72rem; margin: auto }
.rio-prose :where(p, li, dl, dt, dd, label, span, td, th, legend, article, section, nav, footer, header) { color: var(--rio-aa-text-muted) }
h1, h2, h3 { font-family: var(--rio-font-display); color: var(--rio-aa-text-muted); line-height: 1.3 }
a { color: var(--rio-aa-link); text-decoration: underline }
nav ul { display: flex; flex-wrap: wrap; gap: 1rem; list-style: none; padding: 0 }
a, button, input, select { min-height: 2.75rem }
nav a, .site-page-link { display: inline-block; padding: .5rem }
:focus-visible { outline: 3px solid var(--rio-aa-focus); outline-offset: 3px }
.site-skip { position: absolute; transform: translateY(-200%); padding: .75rem; background: var(--rio-bg) }
.site-skip:focus { transform: none }
section { margin-block: 1.5rem; padding: 1rem; border: 1px solid var(--rio-aa-border); border-radius: var(--rio-radius); background: var(--rio-surface); color: var(--rio-aa-text-muted) }
fieldset { min-width: 0; margin-block: .75rem }
[hidden] { display: none }
label { display: block; margin-block: .75rem }
input, select, textarea, button { font: inherit; color: var(--rio-aa-text-muted); background: var(--rio-bg); border: 1px solid var(--rio-aa-border); border-radius: var(--rio-radius); padding: .5rem; max-width: 100% }
button { cursor: pointer }
.site-scroll { overflow-x: auto }
table { border-collapse: collapse; width: 100% }
th, td { text-align: start; padding: .5rem; border-bottom: 1px solid var(--rio-aa-border) }
dt { font-weight: bold }
dd { margin-inline-start: 0; margin-block-end: .75rem }
.site-text { white-space: pre-wrap }
.site-trap { display: none }
meter { width: 100%; accent-color: var(--rio-accent) }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none; transition: none; scroll-behavior: auto } }
}