body {
	background: var(--color-surface);
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: var(--font-size-body);
	-webkit-font-smoothing: antialiased;
}
.site-shell { display: flex; min-height: 100vh; flex-direction: column; }
#main-content { flex: 1; width: 100%; }
.site-header { width: min(100%, var(--content-width)); margin: 0 auto; padding: calc(1.5rem + env(safe-area-inset-top)) var(--space-3) var(--space-2); }
.site-header__brand { display: flex; align-items: center; gap: var(--space-2); min-height: 30px; }
.site-header__logo { width: 28px; height: 30px; object-fit: contain; }
.site-header__name { width: 109px; height: 20px; object-fit: contain; }
.search-form { display: flex; height: 42px; margin-top: var(--space-5); overflow: hidden; border: 1px solid var(--color-brand); border-radius: var(--radius-sm); background: var(--color-soft); }
.search-form__input { min-width: 0; flex: 1; border: 0; outline: 0; padding: .5rem 1rem; background: transparent; }
.search-form__input:focus-visible { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-brand) 30%, transparent); }
.search-form__submit { display: grid; width: 52px; cursor: pointer; place-items: center; background: var(--color-brand); color: #fff; }
.search-form__submit:hover { filter: brightness(.94); }
.site-footer { display: grid; gap: var(--space-1); margin-top: var(--space-5); padding: var(--space-4) var(--space-3); background: var(--color-footer); color: #fff; font-size: var(--font-size-sm); line-height: 1.4; text-align: center; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }