:root {
    color-scheme: light;

    --bg: #fff;
    --text: #111;
    --title: #17233a;
    --accent: #c0161b;
    --panel: #dfe7f6;
    --link: #0000ee;
    --link-hover: #c0161b;
    --border: #8a94a6;

    --width: 671px;
    --font: Verdana, Geneva, "DejaVu Sans", Tahoma, sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
}

/* Всё содержимое — по центру экрана */
.page {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem 1rem;
    text-align: center;
}

.page > * {
    width: 100%;
    max-width: var(--width);
}

/* ---------- Блок поиска ---------- */

.search {
    container-type: inline-size;
}

.search__title {
    display: flex;
    justify-content: space-between;
    gap: 0.3em;
    margin: 0;
    color: var(--title);
    font-size: min(2rem, 4.7cqi);
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.15;
    white-space: nowrap;
}

.search__accent {
    padding: 0.05em 0.35em 0;
    background: var(--panel);
    color: var(--accent);
}

.search__panel {
    padding: 1rem 1rem 1.75rem;
    background: var(--panel);
}

.search__form {
    display: flex;
    gap: 0.4rem;
    max-width: 520px;
    margin: 0 auto;
}

.search__input {
    flex: 1;
    min-width: 0;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--border);
    border-top-color: #333;
    border-radius: 2px;
    background: #fff;
    color: var(--text);
    font: 0.875rem/1.3 Arial, Helvetica, sans-serif;
}

.search__input::placeholder {
    color: #8c8c8c;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.search__input:focus {
    outline: 2px solid #4d90fe;
    outline-offset: 0;
}

.search__button {
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: linear-gradient(#fafafa, #e6e6e6);
    color: #111;
    font: 0.875rem/1.3 Arial, Helvetica, sans-serif;
    cursor: pointer;
}

.search__button:hover {
    background: linear-gradient(#fff, #dcdcdc);
}

.search__button:focus-visible {
    outline: 2px solid #4d90fe;
    outline-offset: 1px;
}

.search__ad {
    max-width: 100%;
    margin-top: 0.6rem;
    overflow: hidden;
}

/* Если Google не отдал рекламу — не оставляем пустое место */
.search__ad:has(ins[data-ad-status="unfilled"]) {
    display: none;
}

/* ---------- Текст и ссылки ---------- */

.notice {
    margin: 2.25rem 0 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.4;
}

.sites ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sites li {
    margin: 0.65rem 0;
}

.sites a {
    color: var(--link);
    font-size: clamp(1.1rem, 4.8vw, 1.6rem);
    font-weight: 700;
    text-underline-offset: 0.12em;
    overflow-wrap: anywhere;
}

.sites a:hover,
.sites a:focus-visible {
    color: var(--link-hover);
}

/* ---------- Утилиты ---------- */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}