/* Сгенерировано scripts/public.mjs из src/theme/tokens.ts. */

:root:not([data-theme]) {
    color-scheme: light;
    --app-bg: #efede8;
    --app-surface: #faf9f6;
    --app-surface-2: #e6e2da;
    --app-surface-3: #f4f1eb;
    --app-text: #24232b;
    --app-muted: #6d6973;
    --app-border: #d0cbc1;
    --app-accent: #504d82;
    --app-accent-contrast: #ffffff;
    --app-accent-soft: #e3e1ef;
    --app-ok: #47715a;
    --app-ok-soft: #e0ebe3;
    --app-warn: #8a6534;
    --app-warn-soft: #f0e6d6;
    --app-bad: #a95349;
    --app-bad-soft: #f1dfdc;
    --app-pending: #6d6973;
    --app-header-bg: #efede8;
    --app-header-text: #24232b;
    --app-backdrop: #d6d1c7;
    --app-pattern: #f7f4ee;
    --app-shadow: rgba(45, 41, 57, 0.24);
    --app-signal: #c57b6b;
    --app-signal-soft: #f0ddd8;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;
        --app-bg: #1f1c1b;
        --app-surface: #2c2826;
        --app-surface-2: #3c3734;
        --app-surface-3: #34302e;
        --app-text: #ede7e3;
        --app-muted: #a89f99;
        --app-border: #4f4844;
        --app-accent: #d97757;
        --app-accent-contrast: #1b1614;
        --app-accent-soft: #35251f;
        --app-ok: #7fbf8f;
        --app-ok-soft: #1d2a20;
        --app-warn: #dda85f;
        --app-warn-soft: #322718;
        --app-bad: #ef7a68;
        --app-bad-soft: #331f1b;
        --app-pending: #948a85;
        --app-header-bg: #2c2826;
        --app-header-text: #ede7e3;
        --app-backdrop: #13100f;
        --app-pattern: #6a5f59;
        --app-shadow: rgba(0, 0, 0, 0.55);
        --app-signal: #e0a08a;
        --app-signal-soft: #3a2a24;
    }
}
:root[data-theme="light"] {
    color-scheme: light;
    --app-bg: #efede8;
    --app-surface: #faf9f6;
    --app-surface-2: #e6e2da;
    --app-surface-3: #f4f1eb;
    --app-text: #24232b;
    --app-muted: #6d6973;
    --app-border: #d0cbc1;
    --app-accent: #504d82;
    --app-accent-contrast: #ffffff;
    --app-accent-soft: #e3e1ef;
    --app-ok: #47715a;
    --app-ok-soft: #e0ebe3;
    --app-warn: #8a6534;
    --app-warn-soft: #f0e6d6;
    --app-bad: #a95349;
    --app-bad-soft: #f1dfdc;
    --app-pending: #6d6973;
    --app-header-bg: #efede8;
    --app-header-text: #24232b;
    --app-backdrop: #d6d1c7;
    --app-pattern: #f7f4ee;
    --app-shadow: rgba(45, 41, 57, 0.24);
    --app-signal: #c57b6b;
    --app-signal-soft: #f0ddd8;
}
:root[data-theme="caramel"] {
    color-scheme: light;
    --app-bg: #f6ebe0;
    --app-surface: #fffaf4;
    --app-surface-2: #eedcc8;
    --app-surface-3: #fff7ef;
    --app-text: #3a2a20;
    --app-muted: #7a6454;
    --app-border: #e0c9ae;
    --app-accent: #7a4f32;
    --app-accent-contrast: #fff8ee;
    --app-accent-soft: #f3e0cc;
    --app-ok: #5c6a41;
    --app-ok-soft: #e9eddc;
    --app-warn: #8f6210;
    --app-warn-soft: #f8ecd3;
    --app-bad: #a8412c;
    --app-bad-soft: #f7e0d8;
    --app-pending: #8b7768;
    --app-header-bg: #fffaf4;
    --app-header-text: #3a2a20;
    --app-backdrop: #9a6d48;
    --app-pattern: #f6ebe0;
    --app-shadow: rgba(90, 60, 32, 0.16);
    --app-signal: #c47a5a;
    --app-signal-soft: #f3e0d4;
}
:root[data-theme="matcha"] {
    color-scheme: light;
    --app-bg: #f3f3e6;
    --app-surface: #fbfbf6;
    --app-surface-2: #e6e9d4;
    --app-surface-3: #f8f8ef;
    --app-text: #3a4129;
    --app-muted: #6a714e;
    --app-border: #c5ce9a;
    --app-accent: #5f6836;
    --app-accent-contrast: #f7f7e7;
    --app-accent-soft: #e6ead0;
    --app-ok: #3f7a4e;
    --app-ok-soft: #e2eee2;
    --app-warn: #8b610d;
    --app-warn-soft: #efdfc4;
    --app-bad: #a63f2c;
    --app-bad-soft: #f6e0d9;
    --app-pending: #7a8064;
    --app-header-bg: #fbfbf6;
    --app-header-text: #3a4129;
    --app-backdrop: #959f58;
    --app-pattern: #f3f3e6;
    --app-shadow: rgba(61, 68, 42, 0.16);
    --app-signal: #b87d5c;
    --app-signal-soft: #efe4d6;
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --app-bg: #1f1c1b;
    --app-surface: #2c2826;
    --app-surface-2: #3c3734;
    --app-surface-3: #34302e;
    --app-text: #ede7e3;
    --app-muted: #a89f99;
    --app-border: #4f4844;
    --app-accent: #d97757;
    --app-accent-contrast: #1b1614;
    --app-accent-soft: #35251f;
    --app-ok: #7fbf8f;
    --app-ok-soft: #1d2a20;
    --app-warn: #dda85f;
    --app-warn-soft: #322718;
    --app-bad: #ef7a68;
    --app-bad-soft: #331f1b;
    --app-pending: #948a85;
    --app-header-bg: #2c2826;
    --app-header-text: #ede7e3;
    --app-backdrop: #13100f;
    --app-pattern: #6a5f59;
    --app-shadow: rgba(0, 0, 0, 0.55);
    --app-signal: #e0a08a;
    --app-signal-soft: #3a2a24;
}
:root[data-theme="violet"] {
    color-scheme: dark;
    --app-bg: #1a1822;
    --app-surface: #272430;
    --app-surface-2: #363248;
    --app-surface-3: #2f2c3c;
    --app-text: #e8e5f0;
    --app-muted: #9e99b0;
    --app-border: #48455a;
    --app-accent: #b7b0df;
    --app-accent-contrast: #16131f;
    --app-accent-soft: #2a2740;
    --app-ok: #6fbf8c;
    --app-ok-soft: #1b2e23;
    --app-warn: #d8a85c;
    --app-warn-soft: #332916;
    --app-bad: #e4796f;
    --app-bad-soft: #341f1e;
    --app-pending: #8e8aa0;
    --app-header-bg: #272430;
    --app-header-text: #e8e5f0;
    --app-backdrop: #100e16;
    --app-pattern: #6a6480;
    --app-shadow: rgba(0, 0, 0, 0.55);
    --app-signal: #d4a094;
    --app-signal-soft: #3a2c2e;
}

/* Веб-стили клиента ученика: только то, что нельзя выразить стилями React
   Native. Шрифты, корень документа, поля по бокам листа и текст правовых
   документов (он приходит готовым HTML). Переменные --app-* скрипт сборки
   генерирует из src/theme/tokens.ts и ставит перед этим файлом.

   Адреса в url() относительные: сборка лежит на своём хосте статики, и
   браузер берёт файлы рядом с этим CSS. Скрипт сборки дописывает к именам
   хеш содержимого. Шрифты и маски грузятся с другого домена, поэтому хост
   статики отдаёт их с Access-Control-Allow-Origin. */

/* Шрифты. Оба семейства – SIL OFL 1.1, текст лицензии в fonts/OFL.txt.
   Кириллица и латиница – отдельными файлами: браузер берёт только нужные. */

@font-face {
    font-family: "Onest";
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url("fonts/onest-cyrillic-v11.68e5e01d6265.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "Onest";
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url("fonts/onest-latin-v11.052df7453325.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
        U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Golos Text";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("fonts/golos-text-cyrillic-v7.17d048ca05cb.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "Golos Text";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("fonts/golos-text-latin-v7.9a69d0aa4734.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
        U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Корень документа. Корневой шрифт растёт с шириной окна – те же пороги,
   что у Pico в прежней вёрстке; клиент считает rem по ним же
   (src/theme/metrics.ts). Прокручивается сам документ, а не вложенный блок:
   так работают «назад», якоря и прилипающая шапка. */

html {
    font-size: 100%;
    background-color: var(--app-bg);
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--app-text) 38%, transparent) transparent;
}
@media (min-width: 576px)  { html { font-size: 106.25%; } }
@media (min-width: 768px)  { html { font-size: 112.5%; } }
@media (min-width: 1024px) { html { font-size: 118.75%; } }
@media (min-width: 1280px) { html { font-size: 125%; } }
@media (min-width: 1536px) { html { font-size: 131.25%; } }

body {
    margin: 0;
    min-height: 100dvh;
    color: var(--app-text);
    background-color: var(--app-bg);
}

#root {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

/* Спиннер до загрузки приложения: в index.html до скрипта и в Page до
   сессии – одно место посередине окна, поэтому смена не заметна. Без
   задержки появления: React пересоздаёт элемент, и спиннер мигнул бы. */
.app-loading {
    flex: 1;
    display: grid;
    place-items: center;
}
.app-loading::after {
    content: "";
    width: 2.25rem;
    height: 2.25rem;
    border: 3px solid color-mix(in srgb, var(--app-accent) 22%, transparent);
    border-top-color: var(--app-accent);
    border-radius: 50%;
    animation: app-spin .8s linear infinite;
}
@keyframes app-spin { to { transform: rotate(360deg); } }

/* Меню шапки одно и в кабинете, и в тесте. Пункты – кнопки, не ссылки:
   Pico иначе подчёркивает их синим. Появление короткое. */
.app-menu-panel {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 2;
    width: 12.5rem;
    margin-top: 2px;
    padding: .25rem 0;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius, .6rem);
    background: var(--app-surface);
    box-shadow: 0 1px 3px var(--app-shadow, rgb(0 0 0 / 12%)), 0 4px 12px var(--app-shadow, rgb(0 0 0 / 12%));
    overflow: hidden;
    animation: app-menu-in .16s ease;
}
.app-menu [role="button"],
.app-menu [role="button"]:is(:hover, :active, :focus, :focus-visible) {
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    background-color: transparent;
    box-shadow: none;
    outline: none;
    color: inherit;
}
.app-menu-panel .app-menu-item,
.app-menu-panel [role="menuitem"] {
    display: block;
    width: 100%;
    margin: 0;
    padding: .45rem 1rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    background-color: transparent;
    color: var(--app-text);
    font: inherit;
    line-height: 1.5;
    text-align: left;
    text-decoration: none;
    box-shadow: none;
    outline: none;
    cursor: pointer;
}
.app-menu-panel .app-menu-item:is(:hover, :active, :focus, :focus-visible),
.app-menu-panel [role="menuitem"]:is(:hover, :active, :focus, :focus-visible) {
    background: var(--app-surface-2);
    background-color: var(--app-surface-2);
    border: 0;
    color: var(--app-text);
    text-align: left;
    text-decoration: none;
    box-shadow: none;
    outline: none;
}
.app-menu-block { padding: .45rem 1rem; }
@keyframes app-menu-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .app-menu-panel { animation: none; }
}

/* Поля по бокам листа – как в base.css. До 1280 px слоёв нет: всё окно и
   есть колонка. Дальше поля получают свой цвет и рисунок, а колонка ложится
   сверху листом с рамкой и тенью. Слои фиксированные и под содержимым. */

.page-back, .page-sheet { display: none; }

@media (min-width: 1280px) {
    .page-back, .page-sheet {
        display: block;
        position: fixed;
        pointer-events: none;
    }

    .page-back {
        inset: 0;
        z-index: -2;
        background: var(--app-backdrop);
    }

    /* Рисунок – две полосы 480 × 1200 у нижних углов окна. Маской, а не
       картинкой: цвет задаёт тема через --app-pattern. */
    .page-back-l, .page-back-r {
        position: absolute;
        bottom: 0;
        width: 480px;
        height: 1200px;
        background: var(--app-pattern);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
    }
    .page-back-l { left: 0;  -webkit-mask-position: left bottom;  mask-position: left bottom; }
    .page-back-r { right: 0; -webkit-mask-position: right bottom; mask-position: right bottom; }

    .page-back-l { -webkit-mask-image: url("img/bg/grid-l.7ae7dca10d67.svg"); mask-image: url("img/bg/grid-l.7ae7dca10d67.svg"); }
    .page-back-r { -webkit-mask-image: url("img/bg/grid-r.4dd6efb467d1.svg"); mask-image: url("img/bg/grid-r.4dd6efb467d1.svg"); }
    [data-bg="phonetics"] .page-back-l { -webkit-mask-image: url("img/bg/phonetics-l.264e63dba4fb.svg"); mask-image: url("img/bg/phonetics-l.264e63dba4fb.svg"); }
    [data-bg="phonetics"] .page-back-r { -webkit-mask-image: url("img/bg/phonetics-r.cc218ae522d8.svg"); mask-image: url("img/bg/phonetics-r.cc218ae522d8.svg"); }
    [data-bg="letters"] .page-back-l { -webkit-mask-image: url("img/bg/letters-l.7631843dac75.svg"); mask-image: url("img/bg/letters-l.7631843dac75.svg"); }
    [data-bg="letters"] .page-back-r { -webkit-mask-image: url("img/bg/letters-r.d62e5b66aa70.svg"); mask-image: url("img/bg/letters-r.d62e5b66aa70.svg"); }
    [data-bg="diagonal"] .page-back-l { -webkit-mask-image: url("img/bg/diagonal-l.2f7dcd73203b.svg"); mask-image: url("img/bg/diagonal-l.2f7dcd73203b.svg"); }
    [data-bg="diagonal"] .page-back-r { -webkit-mask-image: url("img/bg/diagonal-r.f78bbe823652.svg"); mask-image: url("img/bg/diagonal-r.f78bbe823652.svg"); }
    [data-bg="blobs"] .page-back-l { -webkit-mask-image: url("img/bg/blobs-l.f3364a75361e.svg"); mask-image: url("img/bg/blobs-l.f3364a75361e.svg"); }
    [data-bg="blobs"] .page-back-r { -webkit-mask-image: url("img/bg/blobs-r.320396605f61.svg"); mask-image: url("img/bg/blobs-r.320396605f61.svg"); }
    [data-bg="skyline"] .page-back-l { -webkit-mask-image: url("img/bg/skyline-l.cf68095f3a74.svg"); mask-image: url("img/bg/skyline-l.cf68095f3a74.svg"); }
    [data-bg="skyline"] .page-back-r { -webkit-mask-image: url("img/bg/skyline-r.70196eb84a49.svg"); mask-image: url("img/bg/skyline-r.70196eb84a49.svg"); }

    /* Фон body закрывал бы подложку: цвет холста остаётся на html. */
    body { background-color: transparent; }

    .page-sheet { inset: 0; z-index: -1; }
    /* Лист той же ширины, что колонка .container у Pico. */
    .page-sheet > div {
        height: 100%;
        max-width: 1200px;
        margin: 0 auto;
        background: var(--app-bg);
        border-left: 1px solid var(--app-border);
        border-right: 1px solid var(--app-border);
        box-shadow: 0 0 5rem rgb(0 0 0 / 45%);
    }
}
@media (min-width: 1536px) {
    .page-sheet > div { max-width: 1450px; }
}

/* Текст правового документа – markdown опубликованной редакции, который
   рендерит клиент (LegalText.web.tsx). Оформление – кожа .legal простых
   страниц; лист вокруг рисует клиент. */

.legal-text {
    font-family: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--app-text);
}
.legal-text article { display: block; }
/* Заголовки – с .cabinet-page: иначе равные по весу правила Pico из
   cabinet.css (они подключены позже) подменяют шрифт, размер и отступы. */
.cabinet-page .legal-text h1 {
    margin: 0 0 .75rem;
    font-family: "Golos Text", "Onest", system-ui, sans-serif;
    font-size: clamp(1.45rem, 3vw, 1.85rem);
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.2;
}
.cabinet-page .legal-text h2 {
    margin: 1.6rem 0 1rem;
    font-family: "Golos Text", "Onest", system-ui, sans-serif;
    font-size: 1.12rem;
    font-weight: 650;
    letter-spacing: -.015em;
    line-height: 1.15;
}
.legal-text p { margin: 0 0 1rem; line-height: 1.6; }
.legal-text ul { margin: 0 0 1rem; padding-inline-start: 1.25rem; }
.legal-text li { margin-bottom: .25rem; line-height: 1.6; list-style: square; }
.legal-text b, .legal-text strong { font-weight: 700; }
.legal-text a {
    color: var(--app-accent);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--app-accent) 50%, transparent);
    text-underline-offset: .125em;
}

/* Изолированная кожа кабинета из оригинального дизайна.
   Pico CSS v2.1.1 – MIT (https://picocss.com). Состояние и события – React.
   Палитра --app-* задаётся только src/theme/tokens.ts. */
@charset "UTF-8";.cabinet-page{--pico-font-family-emoji:"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--pico-font-family-sans-serif:system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif,var(--pico-font-family-emoji);--pico-font-family-monospace:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace,var(--pico-font-family-emoji);--pico-font-family:var(--pico-font-family-sans-serif);--pico-line-height:1.5;--pico-font-weight:400;--pico-font-size:100%;--pico-text-underline-offset:0.1rem;--pico-border-radius:0.25rem;--pico-border-width:0.0625rem;--pico-outline-width:0.125rem;--pico-transition:0.2s ease-in-out;--pico-spacing:1rem;--pico-typography-spacing-vertical:1rem;--pico-block-spacing-vertical:var(--pico-spacing);--pico-block-spacing-horizontal:var(--pico-spacing);--pico-grid-column-gap:var(--pico-spacing);--pico-grid-row-gap:var(--pico-spacing);--pico-form-element-spacing-vertical:0.75rem;--pico-form-element-spacing-horizontal:1rem;--pico-group-box-shadow:0 0 0 rgba(0, 0, 0, 0);--pico-group-box-shadow-focus-with-button:0 0 0 var(--pico-outline-width) var(--pico-primary-focus);--pico-group-box-shadow-focus-with-input:0 0 0 0.0625rem var(--pico-form-element-border-color);--pico-modal-overlay-backdrop-filter:blur(0.375rem);--pico-nav-element-spacing-vertical:1rem;--pico-nav-element-spacing-horizontal:0.5rem;--pico-nav-link-spacing-vertical:0.5rem;--pico-nav-link-spacing-horizontal:0.5rem;--pico-nav-breadcrumb-divider:">";--pico-icon-checkbox:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--pico-icon-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");--pico-icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--pico-icon-date:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");--pico-icon-time:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");--pico-icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");--pico-icon-close:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");--pico-icon-loading:url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='rgb(136, 145, 164)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E")}@media (min-width:576px){.cabinet-page{--pico-font-size:106.25%}}@media (min-width:768px){.cabinet-page{--pico-font-size:112.5%}}@media (min-width:1024px){.cabinet-page{--pico-font-size:118.75%}}@media (min-width:1280px){.cabinet-page{--pico-font-size:125%}}@media (min-width:1536px){.cabinet-page{--pico-font-size:131.25%}}.cabinet-page a{--pico-text-decoration:underline}.cabinet-page a.contrast,.cabinet-page a.secondary{--pico-text-decoration:underline}.cabinet-page small{--pico-font-size:0.875em}.cabinet-page h1,.cabinet-page h2,.cabinet-page h3,.cabinet-page h4,.cabinet-page h5,.cabinet-page h6{--pico-font-weight:700}.cabinet-page h1{--pico-font-size:2rem;--pico-line-height:1.125;--pico-typography-spacing-top:3rem}.cabinet-page h2{--pico-font-size:1.75rem;--pico-line-height:1.15;--pico-typography-spacing-top:2.625rem}.cabinet-page h3{--pico-font-size:1.5rem;--pico-line-height:1.175;--pico-typography-spacing-top:2.25rem}.cabinet-page h4{--pico-font-size:1.25rem;--pico-line-height:1.2;--pico-typography-spacing-top:1.874rem}.cabinet-page h5{--pico-font-size:1.125rem;--pico-line-height:1.225;--pico-typography-spacing-top:1.6875rem}.cabinet-page h6{--pico-font-size:1rem;--pico-line-height:1.25;--pico-typography-spacing-top:1.5rem}.cabinet-page tfoot td,.cabinet-page tfoot th,.cabinet-page thead td,.cabinet-page thead th{--pico-font-weight:600;--pico-border-width:0.1875rem}.cabinet-page code,.cabinet-page kbd,.cabinet-page pre,.cabinet-page samp{--pico-font-family:var(--pico-font-family-monospace)}.cabinet-page kbd{--pico-font-weight:bolder}.cabinet-page :where(select,textarea),.cabinet-page input:not([type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[type=file]){--pico-outline-width:0.0625rem}.cabinet-page [type=search]{--pico-border-radius:5rem}.cabinet-page [type=checkbox],.cabinet-page [type=radio]{--pico-border-width:0.125rem}.cabinet-page [type=checkbox][role=switch]{--pico-border-width:0.1875rem}.cabinet-page details.dropdown summary:not([role=button]){--pico-outline-width:0.0625rem}.cabinet-page nav details.dropdown summary:focus-visible{--pico-outline-width:0.125rem}.cabinet-page [role=search]{--pico-border-radius:5rem}.cabinet-page [role=group]:has(button.secondary:focus,[type=submit].secondary:focus,[type=button].secondary:focus,[role=button].secondary:focus),.cabinet-page [role=search]:has(button.secondary:focus,[type=submit].secondary:focus,[type=button].secondary:focus,[role=button].secondary:focus){--pico-group-box-shadow-focus-with-button:0 0 0 var(--pico-outline-width) var(--pico-secondary-focus)}.cabinet-page [role=group]:has(button.contrast:focus,[type=submit].contrast:focus,[type=button].contrast:focus,[role=button].contrast:focus),.cabinet-page [role=search]:has(button.contrast:focus,[type=submit].contrast:focus,[type=button].contrast:focus,[role=button].contrast:focus){--pico-group-box-shadow-focus-with-button:0 0 0 var(--pico-outline-width) var(--pico-contrast-focus)}.cabinet-page [role=group] [role=button],.cabinet-page [role=group] [type=button],.cabinet-page [role=group] [type=submit],.cabinet-page [role=group] button,.cabinet-page [role=search] [role=button],.cabinet-page [role=search] [type=button],.cabinet-page [role=search] [type=submit],.cabinet-page [role=search] button{--pico-form-element-spacing-horizontal:2rem}.cabinet-page details summary[role=button]:not(.outline)::after{filter:brightness(0) invert(1)}.cabinet-page [aria-busy=true]:not(input,select,textarea):is(button,[type=submit],[type=button],[type=reset],[role=button]):not(.outline)::before{filter:brightness(0) invert(1)}.cabinet-page:not([data-theme=dark]),.cabinet-page [data-theme=light]{--pico-background-color:#fff;--pico-color:#373c44;--pico-text-selection-color:rgba(2, 154, 232, 0.25);--pico-muted-color:#646b79;--pico-muted-border-color:#e7eaf0;--pico-primary:#0172ad;--pico-primary-background:#0172ad;--pico-primary-border:var(--pico-primary-background);--pico-primary-underline:rgba(1, 114, 173, 0.5);--pico-primary-hover:#015887;--pico-primary-hover-background:#02659a;--pico-primary-hover-border:var(--pico-primary-hover-background);--pico-primary-hover-underline:var(--pico-primary-hover);--pico-primary-focus:rgba(2, 154, 232, 0.5);--pico-primary-inverse:#fff;--pico-secondary:#5d6b89;--pico-secondary-background:#525f7a;--pico-secondary-border:var(--pico-secondary-background);--pico-secondary-underline:rgba(93, 107, 137, 0.5);--pico-secondary-hover:#48536b;--pico-secondary-hover-background:#48536b;--pico-secondary-hover-border:var(--pico-secondary-hover-background);--pico-secondary-hover-underline:var(--pico-secondary-hover);--pico-secondary-focus:rgba(93, 107, 137, 0.25);--pico-secondary-inverse:#fff;--pico-contrast:#181c25;--pico-contrast-background:#181c25;--pico-contrast-border:var(--pico-contrast-background);--pico-contrast-underline:rgba(24, 28, 37, 0.5);--pico-contrast-hover:#000;--pico-contrast-hover-background:#000;--pico-contrast-hover-border:var(--pico-contrast-hover-background);--pico-contrast-hover-underline:var(--pico-secondary-hover);--pico-contrast-focus:rgba(93, 107, 137, 0.25);--pico-contrast-inverse:#fff;--pico-box-shadow:0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698),0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024),0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03),0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036),0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302),0.5rem 1rem 6rem rgba(129, 145, 181, 0.06),0 0 0 0.0625rem rgba(129, 145, 181, 0.015);--pico-h1-color:#2d3138;--pico-h2-color:#373c44;--pico-h3-color:#424751;--pico-h4-color:#4d535e;--pico-h5-color:#5c6370;--pico-h6-color:#646b79;--pico-mark-background-color:#fde7c0;--pico-mark-color:#0f1114;--pico-ins-color:#1d6a54;--pico-del-color:#883935;--pico-blockquote-border-color:var(--pico-muted-border-color);--pico-blockquote-footer-color:var(--pico-muted-color);--pico-button-box-shadow:0 0 0 rgba(0, 0, 0, 0);--pico-button-hover-box-shadow:0 0 0 rgba(0, 0, 0, 0);--pico-table-border-color:var(--pico-muted-border-color);--pico-table-row-stripped-background-color:rgba(111, 120, 135, 0.0375);--pico-code-background-color:#f3f5f7;--pico-code-color:#646b79;--pico-code-kbd-background-color:var(--pico-color);--pico-code-kbd-color:var(--pico-background-color);--pico-form-element-background-color:#fbfcfc;--pico-form-element-selected-background-color:#dfe3eb;--pico-form-element-border-color:#cfd5e2;--pico-form-element-color:#23262c;--pico-form-element-placeholder-color:var(--pico-muted-color);--pico-form-element-active-background-color:#fff;--pico-form-element-active-border-color:var(--pico-primary-border);--pico-form-element-focus-color:var(--pico-primary-border);--pico-form-element-disabled-opacity:0.5;--pico-form-element-invalid-border-color:#b86a6b;--pico-form-element-invalid-active-border-color:#c84f48;--pico-form-element-invalid-focus-color:var(--pico-form-element-invalid-active-border-color);--pico-form-element-valid-border-color:#4c9b8a;--pico-form-element-valid-active-border-color:#279977;--pico-form-element-valid-focus-color:var(--pico-form-element-valid-active-border-color);--pico-switch-background-color:#bfc7d9;--pico-switch-checked-background-color:var(--pico-primary-background);--pico-switch-color:#fff;--pico-switch-thumb-box-shadow:0 0 0 rgba(0, 0, 0, 0);--pico-range-border-color:#dfe3eb;--pico-range-active-border-color:#bfc7d9;--pico-range-thumb-border-color:var(--pico-background-color);--pico-range-thumb-color:var(--pico-secondary-background);--pico-range-thumb-active-color:var(--pico-primary-background);--pico-accordion-border-color:var(--pico-muted-border-color);--pico-accordion-active-summary-color:var(--pico-primary-hover);--pico-accordion-close-summary-color:var(--pico-color);--pico-accordion-open-summary-color:var(--pico-muted-color);--pico-card-background-color:var(--pico-background-color);--pico-card-border-color:var(--pico-muted-border-color);--pico-card-box-shadow:var(--pico-box-shadow);--pico-card-sectioning-background-color:#fbfcfc;--pico-dropdown-background-color:#fff;--pico-dropdown-border-color:#eff1f4;--pico-dropdown-box-shadow:var(--pico-box-shadow);--pico-dropdown-color:var(--pico-color);--pico-dropdown-hover-background-color:#eff1f4;--pico-loading-spinner-opacity:0.5;--pico-modal-overlay-background-color:rgba(232, 234, 237, 0.75);--pico-progress-background-color:#dfe3eb;--pico-progress-color:var(--pico-primary-background);--pico-tooltip-background-color:var(--pico-contrast-background);--pico-tooltip-color:var(--pico-contrast-inverse);--pico-icon-valid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--pico-icon-invalid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(200, 79, 72)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");color-scheme:light}.cabinet-page:not([data-theme=dark]) input:is([type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[type=file]),.cabinet-page [data-theme=light] input:is([type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[type=file]){--pico-form-element-focus-color:var(--pico-primary-focus)}@media only screen and (prefers-color-scheme:dark){.cabinet-page:not([data-theme]){--pico-background-color:#13171f;--pico-color:#c2c7d0;--pico-text-selection-color:rgba(1, 170, 255, 0.1875);--pico-muted-color:#7b8495;--pico-muted-border-color:#202632;--pico-primary:#01aaff;--pico-primary-background:#0172ad;--pico-primary-border:var(--pico-primary-background);--pico-primary-underline:rgba(1, 170, 255, 0.5);--pico-primary-hover:#79c0ff;--pico-primary-hover-background:#017fc0;--pico-primary-hover-border:var(--pico-primary-hover-background);--pico-primary-hover-underline:var(--pico-primary-hover);--pico-primary-focus:rgba(1, 170, 255, 0.375);--pico-primary-inverse:#fff;--pico-secondary:#969eaf;--pico-secondary-background:#525f7a;--pico-secondary-border:var(--pico-secondary-background);--pico-secondary-underline:rgba(150, 158, 175, 0.5);--pico-secondary-hover:#b3b9c5;--pico-secondary-hover-background:#5d6b89;--pico-secondary-hover-border:var(--pico-secondary-hover-background);--pico-secondary-hover-underline:var(--pico-secondary-hover);--pico-secondary-focus:rgba(144, 158, 190, 0.25);--pico-secondary-inverse:#fff;--pico-contrast:#dfe3eb;--pico-contrast-background:#eff1f4;--pico-contrast-border:var(--pico-contrast-background);--pico-contrast-underline:rgba(223, 227, 235, 0.5);--pico-contrast-hover:#fff;--pico-contrast-hover-background:#fff;--pico-contrast-hover-border:var(--pico-contrast-hover-background);--pico-contrast-hover-underline:var(--pico-contrast-hover);--pico-contrast-focus:rgba(207, 213, 226, 0.25);--pico-contrast-inverse:#000;--pico-box-shadow:0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698),0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024),0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03),0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036),0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302),0.5rem 1rem 6rem rgba(7, 9, 12, 0.06),0 0 0 0.0625rem rgba(7, 9, 12, 0.015);--pico-h1-color:#f0f1f3;--pico-h2-color:#e0e3e7;--pico-h3-color:#c2c7d0;--pico-h4-color:#b3b9c5;--pico-h5-color:#a4acba;--pico-h6-color:#8891a4;--pico-mark-background-color:#014063;--pico-mark-color:#fff;--pico-ins-color:#62af9a;--pico-del-color:#ce7e7b;--pico-blockquote-border-color:var(--pico-muted-border-color);--pico-blockquote-footer-color:var(--pico-muted-color);--pico-button-box-shadow:0 0 0 rgba(0, 0, 0, 0);--pico-button-hover-box-shadow:0 0 0 rgba(0, 0, 0, 0);--pico-table-border-color:var(--pico-muted-border-color);--pico-table-row-stripped-background-color:rgba(111, 120, 135, 0.0375);--pico-code-background-color:#1a1f28;--pico-code-color:#8891a4;--pico-code-kbd-background-color:var(--pico-color);--pico-code-kbd-color:var(--pico-background-color);--pico-form-element-background-color:#1c212c;--pico-form-element-selected-background-color:#2a3140;--pico-form-element-border-color:#2a3140;--pico-form-element-color:#e0e3e7;--pico-form-element-placeholder-color:#8891a4;--pico-form-element-active-background-color:#1a1f28;--pico-form-element-active-border-color:var(--pico-primary-border);--pico-form-element-focus-color:var(--pico-primary-border);--pico-form-element-disabled-opacity:0.5;--pico-form-element-invalid-border-color:#964a50;--pico-form-element-invalid-active-border-color:#b7403b;--pico-form-element-invalid-focus-color:var(--pico-form-element-invalid-active-border-color);--pico-form-element-valid-border-color:#2a7b6f;--pico-form-element-valid-active-border-color:#16896a;--pico-form-element-valid-focus-color:var(--pico-form-element-valid-active-border-color);--pico-switch-background-color:#333c4e;--pico-switch-checked-background-color:var(--pico-primary-background);--pico-switch-color:#fff;--pico-switch-thumb-box-shadow:0 0 0 rgba(0, 0, 0, 0);--pico-range-border-color:#202632;--pico-range-active-border-color:#2a3140;--pico-range-thumb-border-color:var(--pico-background-color);--pico-range-thumb-color:var(--pico-secondary-background);--pico-range-thumb-active-color:var(--pico-primary-background);--pico-accordion-border-color:var(--pico-muted-border-color);--pico-accordion-active-summary-color:var(--pico-primary-hover);--pico-accordion-close-summary-color:var(--pico-color);--pico-accordion-open-summary-color:var(--pico-muted-color);--pico-card-background-color:#181c25;--pico-card-border-color:var(--pico-card-background-color);--pico-card-box-shadow:var(--pico-box-shadow);--pico-card-sectioning-background-color:#1a1f28;--pico-dropdown-background-color:#181c25;--pico-dropdown-border-color:#202632;--pico-dropdown-box-shadow:var(--pico-box-shadow);--pico-dropdown-color:var(--pico-color);--pico-dropdown-hover-background-color:#202632;--pico-loading-spinner-opacity:0.5;--pico-modal-overlay-background-color:rgba(8, 9, 10, 0.75);--pico-progress-background-color:#202632;--pico-progress-color:var(--pico-primary-background);--pico-tooltip-background-color:var(--pico-contrast-background);--pico-tooltip-color:var(--pico-contrast-inverse);--pico-icon-valid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--pico-icon-invalid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(150, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");color-scheme:dark}.cabinet-page:not([data-theme]) input:is([type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[type=file]){--pico-form-element-focus-color:var(--pico-primary-focus)}.cabinet-page:not([data-theme]) details summary[role=button].contrast:not(.outline)::after{filter:brightness(0)}.cabinet-page:not([data-theme]) [aria-busy=true]:not(input,select,textarea).contrast:is(button,[type=submit],[type=button],[type=reset],[role=button]):not(.outline)::before{filter:brightness(0)}}.cabinet-page [data-theme=dark]{--pico-background-color:#13171f;--pico-color:#c2c7d0;--pico-text-selection-color:rgba(1, 170, 255, 0.1875);--pico-muted-color:#7b8495;--pico-muted-border-color:#202632;--pico-primary:#01aaff;--pico-primary-background:#0172ad;--pico-primary-border:var(--pico-primary-background);--pico-primary-underline:rgba(1, 170, 255, 0.5);--pico-primary-hover:#79c0ff;--pico-primary-hover-background:#017fc0;--pico-primary-hover-border:var(--pico-primary-hover-background);--pico-primary-hover-underline:var(--pico-primary-hover);--pico-primary-focus:rgba(1, 170, 255, 0.375);--pico-primary-inverse:#fff;--pico-secondary:#969eaf;--pico-secondary-background:#525f7a;--pico-secondary-border:var(--pico-secondary-background);--pico-secondary-underline:rgba(150, 158, 175, 0.5);--pico-secondary-hover:#b3b9c5;--pico-secondary-hover-background:#5d6b89;--pico-secondary-hover-border:var(--pico-secondary-hover-background);--pico-secondary-hover-underline:var(--pico-secondary-hover);--pico-secondary-focus:rgba(144, 158, 190, 0.25);--pico-secondary-inverse:#fff;--pico-contrast:#dfe3eb;--pico-contrast-background:#eff1f4;--pico-contrast-border:var(--pico-contrast-background);--pico-contrast-underline:rgba(223, 227, 235, 0.5);--pico-contrast-hover:#fff;--pico-contrast-hover-background:#fff;--pico-contrast-hover-border:var(--pico-contrast-hover-background);--pico-contrast-hover-underline:var(--pico-contrast-hover);--pico-contrast-focus:rgba(207, 213, 226, 0.25);--pico-contrast-inverse:#000;--pico-box-shadow:0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698),0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024),0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03),0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036),0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302),0.5rem 1rem 6rem rgba(7, 9, 12, 0.06),0 0 0 0.0625rem rgba(7, 9, 12, 0.015);--pico-h1-color:#f0f1f3;--pico-h2-color:#e0e3e7;--pico-h3-color:#c2c7d0;--pico-h4-color:#b3b9c5;--pico-h5-color:#a4acba;--pico-h6-color:#8891a4;--pico-mark-background-color:#014063;--pico-mark-color:#fff;--pico-ins-color:#62af9a;--pico-del-color:#ce7e7b;--pico-blockquote-border-color:var(--pico-muted-border-color);--pico-blockquote-footer-color:var(--pico-muted-color);--pico-button-box-shadow:0 0 0 rgba(0, 0, 0, 0);--pico-button-hover-box-shadow:0 0 0 rgba(0, 0, 0, 0);--pico-table-border-color:var(--pico-muted-border-color);--pico-table-row-stripped-background-color:rgba(111, 120, 135, 0.0375);--pico-code-background-color:#1a1f28;--pico-code-color:#8891a4;--pico-code-kbd-background-color:var(--pico-color);--pico-code-kbd-color:var(--pico-background-color);--pico-form-element-background-color:#1c212c;--pico-form-element-selected-background-color:#2a3140;--pico-form-element-border-color:#2a3140;--pico-form-element-color:#e0e3e7;--pico-form-element-placeholder-color:#8891a4;--pico-form-element-active-background-color:#1a1f28;--pico-form-element-active-border-color:var(--pico-primary-border);--pico-form-element-focus-color:var(--pico-primary-border);--pico-form-element-disabled-opacity:0.5;--pico-form-element-invalid-border-color:#964a50;--pico-form-element-invalid-active-border-color:#b7403b;--pico-form-element-invalid-focus-color:var(--pico-form-element-invalid-active-border-color);--pico-form-element-valid-border-color:#2a7b6f;--pico-form-element-valid-active-border-color:#16896a;--pico-form-element-valid-focus-color:var(--pico-form-element-valid-active-border-color);--pico-switch-background-color:#333c4e;--pico-switch-checked-background-color:var(--pico-primary-background);--pico-switch-color:#fff;--pico-switch-thumb-box-shadow:0 0 0 rgba(0, 0, 0, 0);--pico-range-border-color:#202632;--pico-range-active-border-color:#2a3140;--pico-range-thumb-border-color:var(--pico-background-color);--pico-range-thumb-color:var(--pico-secondary-background);--pico-range-thumb-active-color:var(--pico-primary-background);--pico-accordion-border-color:var(--pico-muted-border-color);--pico-accordion-active-summary-color:var(--pico-primary-hover);--pico-accordion-close-summary-color:var(--pico-color);--pico-accordion-open-summary-color:var(--pico-muted-color);--pico-card-background-color:#181c25;--pico-card-border-color:var(--pico-card-background-color);--pico-card-box-shadow:var(--pico-box-shadow);--pico-card-sectioning-background-color:#1a1f28;--pico-dropdown-background-color:#181c25;--pico-dropdown-border-color:#202632;--pico-dropdown-box-shadow:var(--pico-box-shadow);--pico-dropdown-color:var(--pico-color);--pico-dropdown-hover-background-color:#202632;--pico-loading-spinner-opacity:0.5;--pico-modal-overlay-background-color:rgba(8, 9, 10, 0.75);--pico-progress-background-color:#202632;--pico-progress-color:var(--pico-primary-background);--pico-tooltip-background-color:var(--pico-contrast-background);--pico-tooltip-color:var(--pico-contrast-inverse);--pico-icon-valid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--pico-icon-invalid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(150, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");color-scheme:dark}.cabinet-page [data-theme=dark] input:is([type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[type=file]){--pico-form-element-focus-color:var(--pico-primary-focus)}.cabinet-page [data-theme=dark] details summary[role=button].contrast:not(.outline)::after{filter:brightness(0)}.cabinet-page [data-theme=dark] [aria-busy=true]:not(input,select,textarea).contrast:is(button,[type=submit],[type=button],[type=reset],[role=button]):not(.outline)::before{filter:brightness(0)}.cabinet-page [type=checkbox],.cabinet-page [type=radio],.cabinet-page [type=range],.cabinet-page progress{accent-color:var(--pico-primary)}.cabinet-page *,.cabinet-page ::after,.cabinet-page ::before{box-sizing:border-box;background-repeat:no-repeat}.cabinet-page ::after,.cabinet-page ::before{text-decoration:inherit;vertical-align:inherit}:where(.cabinet-page){-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;background-color:var(--pico-background-color);color:var(--pico-color);font-weight:var(--pico-font-weight);font-size:var(--pico-font-size);line-height:var(--pico-line-height);font-family:var(--pico-font-family);text-underline-offset:var(--pico-text-underline-offset);text-rendering:optimizeLegibility;overflow-wrap:break-word;-moz-tab-size:4;-o-tab-size:4;tab-size:4}.cabinet-page{width:100%;margin:0}.cabinet-page main{display:block}.cabinet-page body>footer,.cabinet-page body>header,.cabinet-page body>main{padding-block:var(--pico-block-spacing-vertical)}.cabinet-page section{margin-bottom:var(--pico-block-spacing-vertical)}.cabinet-page .container,.cabinet-page .container-fluid{width:100%;margin-right:auto;margin-left:auto;padding-right:var(--pico-spacing);padding-left:var(--pico-spacing)}@media (min-width:576px){.cabinet-page .container{max-width:510px;padding-right:0;padding-left:0}}@media (min-width:768px){.cabinet-page .container{max-width:700px}}@media (min-width:1024px){.cabinet-page .container{max-width:950px}}@media (min-width:1280px){.cabinet-page .container{max-width:1200px}}@media (min-width:1536px){.cabinet-page .container{max-width:1450px}}.cabinet-page .grid{grid-column-gap:var(--pico-grid-column-gap);grid-row-gap:var(--pico-grid-row-gap);display:grid;grid-template-columns:1fr}@media (min-width:768px){.cabinet-page .grid{grid-template-columns:repeat(auto-fit,minmax(0%,1fr))}}.cabinet-page .grid>*{min-width:0}.cabinet-page .overflow-auto{overflow:auto}.cabinet-page b,.cabinet-page strong{font-weight:bolder}.cabinet-page sub,.cabinet-page sup{position:relative;font-size:.75em;line-height:0;vertical-align:baseline}.cabinet-page sub{bottom:-.25em}.cabinet-page sup{top:-.5em}.cabinet-page address,.cabinet-page blockquote,.cabinet-page dl,.cabinet-page ol,.cabinet-page p,.cabinet-page pre,.cabinet-page table,.cabinet-page ul{margin-top:0;margin-bottom:var(--pico-typography-spacing-vertical);color:var(--pico-color);font-style:normal;font-weight:var(--pico-font-weight)}.cabinet-page h1,.cabinet-page h2,.cabinet-page h3,.cabinet-page h4,.cabinet-page h5,.cabinet-page h6{margin-top:0;margin-bottom:var(--pico-typography-spacing-vertical);color:var(--pico-color);font-weight:var(--pico-font-weight);font-size:var(--pico-font-size);line-height:var(--pico-line-height);font-family:var(--pico-font-family)}.cabinet-page h1{--pico-color:var(--pico-h1-color)}.cabinet-page h2{--pico-color:var(--pico-h2-color)}.cabinet-page h3{--pico-color:var(--pico-h3-color)}.cabinet-page h4{--pico-color:var(--pico-h4-color)}.cabinet-page h5{--pico-color:var(--pico-h5-color)}.cabinet-page h6{--pico-color:var(--pico-h6-color)}.cabinet-page :where(article,address,blockquote,dl,figure,form,ol,p,pre,table,ul)~:is(h1,h2,h3,h4,h5,h6){margin-top:var(--pico-typography-spacing-top)}.cabinet-page p{margin-bottom:var(--pico-typography-spacing-vertical)}.cabinet-page hgroup{margin-bottom:var(--pico-typography-spacing-vertical)}.cabinet-page hgroup>*{margin-top:0;margin-bottom:0}.cabinet-page hgroup>:not(:first-child):last-child{--pico-color:var(--pico-muted-color);--pico-font-weight:unset;font-size:1rem}.cabinet-page :where(ol,ul) li{margin-bottom:calc(var(--pico-typography-spacing-vertical) * .25)}.cabinet-page :where(dl,ol,ul) :where(dl,ol,ul){margin:0;margin-top:calc(var(--pico-typography-spacing-vertical) * .25)}.cabinet-page ul li{list-style:square}.cabinet-page mark{padding:.125rem .25rem;background-color:var(--pico-mark-background-color);color:var(--pico-mark-color);vertical-align:baseline}.cabinet-page blockquote{display:block;margin:var(--pico-typography-spacing-vertical) 0;padding:var(--pico-spacing);border-right:none;border-left:.25rem solid var(--pico-blockquote-border-color);border-inline-start:0.25rem solid var(--pico-blockquote-border-color);border-inline-end:none}.cabinet-page blockquote footer{margin-top:calc(var(--pico-typography-spacing-vertical) * .5);color:var(--pico-blockquote-footer-color)}.cabinet-page abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}.cabinet-page ins{color:var(--pico-ins-color);text-decoration:none}.cabinet-page del{color:var(--pico-del-color)}.cabinet-page ::-moz-selection{background-color:var(--pico-text-selection-color)}.cabinet-page ::selection{background-color:var(--pico-text-selection-color)}.cabinet-page :where(a:not([role=button])),.cabinet-page [role=link]{--pico-color:var(--pico-primary);--pico-background-color:transparent;--pico-underline:var(--pico-primary-underline);outline:0;background-color:var(--pico-background-color);color:var(--pico-color);-webkit-text-decoration:var(--pico-text-decoration);text-decoration:var(--pico-text-decoration);text-decoration-color:var(--pico-underline);text-underline-offset:0.125em;transition:background-color var(--pico-transition),color var(--pico-transition),box-shadow var(--pico-transition),-webkit-text-decoration var(--pico-transition);transition:background-color var(--pico-transition),color var(--pico-transition),text-decoration var(--pico-transition),box-shadow var(--pico-transition);transition:background-color var(--pico-transition),color var(--pico-transition),text-decoration var(--pico-transition),box-shadow var(--pico-transition),-webkit-text-decoration var(--pico-transition)}.cabinet-page :where(a:not([role=button])):is([aria-current]:not([aria-current=false]),:hover,:active,:focus),.cabinet-page [role=link]:is([aria-current]:not([aria-current=false]),:hover,:active,:focus){--pico-color:var(--pico-primary-hover);--pico-underline:var(--pico-primary-hover-underline);--pico-text-decoration:underline}.cabinet-page :where(a:not([role=button])):focus-visible,.cabinet-page [role=link]:focus-visible{box-shadow:0 0 0 var(--pico-outline-width) var(--pico-primary-focus)}.cabinet-page :where(a:not([role=button])).secondary,.cabinet-page [role=link].secondary{--pico-color:var(--pico-secondary);--pico-underline:var(--pico-secondary-underline)}.cabinet-page :where(a:not([role=button])).secondary:is([aria-current]:not([aria-current=false]),:hover,:active,:focus),.cabinet-page [role=link].secondary:is([aria-current]:not([aria-current=false]),:hover,:active,:focus){--pico-color:var(--pico-secondary-hover);--pico-underline:var(--pico-secondary-hover-underline)}.cabinet-page :where(a:not([role=button])).contrast,.cabinet-page [role=link].contrast{--pico-color:var(--pico-contrast);--pico-underline:var(--pico-contrast-underline)}.cabinet-page :where(a:not([role=button])).contrast:is([aria-current]:not([aria-current=false]),:hover,:active,:focus),.cabinet-page [role=link].contrast:is([aria-current]:not([aria-current=false]),:hover,:active,:focus){--pico-color:var(--pico-contrast-hover);--pico-underline:var(--pico-contrast-hover-underline)}.cabinet-page a[role=button]{display:inline-block}.cabinet-page button{margin:0;overflow:visible;font-family:inherit;text-transform:none}.cabinet-page [type=button],.cabinet-page [type=reset],.cabinet-page [type=submit],.cabinet-page button{-webkit-appearance:button}.cabinet-page [role=button],.cabinet-page [type=button],.cabinet-page [type=file]::file-selector-button,.cabinet-page [type=reset],.cabinet-page [type=submit],.cabinet-page button{--pico-background-color:var(--pico-primary-background);--pico-border-color:var(--pico-primary-border);--pico-color:var(--pico-primary-inverse);--pico-box-shadow:var(--pico-button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));padding:var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);border:var(--pico-border-width) solid var(--pico-border-color);border-radius:var(--pico-border-radius);outline:0;background-color:var(--pico-background-color);box-shadow:var(--pico-box-shadow);color:var(--pico-color);font-weight:var(--pico-font-weight);font-size:1rem;line-height:var(--pico-line-height);text-align:center;text-decoration:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:background-color var(--pico-transition),border-color var(--pico-transition),color var(--pico-transition),box-shadow var(--pico-transition)}.cabinet-page [role=button]:is(:hover,:active,:focus),.cabinet-page [role=button]:is([aria-current]:not([aria-current=false])),.cabinet-page [type=button]:is(:hover,:active,:focus),.cabinet-page [type=button]:is([aria-current]:not([aria-current=false])),.cabinet-page [type=file]::file-selector-button:is(:hover,:active,:focus),.cabinet-page [type=file]::file-selector-button:is([aria-current]:not([aria-current=false])),.cabinet-page [type=reset]:is(:hover,:active,:focus),.cabinet-page [type=reset]:is([aria-current]:not([aria-current=false])),.cabinet-page [type=submit]:is(:hover,:active,:focus),.cabinet-page [type=submit]:is([aria-current]:not([aria-current=false])),.cabinet-page button:is(:hover,:active,:focus),.cabinet-page button:is([aria-current]:not([aria-current=false])){--pico-background-color:var(--pico-primary-hover-background);--pico-border-color:var(--pico-primary-hover-border);--pico-box-shadow:var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));--pico-color:var(--pico-primary-inverse)}.cabinet-page [role=button]:focus,.cabinet-page [role=button]:is([aria-current]:not([aria-current=false])):focus,.cabinet-page [type=button]:focus,.cabinet-page [type=button]:is([aria-current]:not([aria-current=false])):focus,.cabinet-page [type=file]::file-selector-button:focus,.cabinet-page [type=file]::file-selector-button:is([aria-current]:not([aria-current=false])):focus,.cabinet-page [type=reset]:focus,.cabinet-page [type=reset]:is([aria-current]:not([aria-current=false])):focus,.cabinet-page [type=submit]:focus,.cabinet-page [type=submit]:is([aria-current]:not([aria-current=false])):focus,.cabinet-page button:focus,.cabinet-page button:is([aria-current]:not([aria-current=false])):focus{--pico-box-shadow:var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),0 0 0 var(--pico-outline-width) var(--pico-primary-focus)}.cabinet-page [type=button],.cabinet-page [type=reset],.cabinet-page [type=submit]{margin-bottom:var(--pico-spacing)}.cabinet-page :is(button,[type=submit],[type=button],[role=button]).secondary,.cabinet-page [type=file]::file-selector-button,.cabinet-page [type=reset]{--pico-background-color:var(--pico-secondary-background);--pico-border-color:var(--pico-secondary-border);--pico-color:var(--pico-secondary-inverse);cursor:pointer}.cabinet-page :is(button,[type=submit],[type=button],[role=button]).secondary:is([aria-current]:not([aria-current=false]),:hover,:active,:focus),.cabinet-page [type=file]::file-selector-button:is([aria-current]:not([aria-current=false]),:hover,:active,:focus),.cabinet-page [type=reset]:is([aria-current]:not([aria-current=false]),:hover,:active,:focus){--pico-background-color:var(--pico-secondary-hover-background);--pico-border-color:var(--pico-secondary-hover-border);--pico-color:var(--pico-secondary-inverse)}.cabinet-page :is(button,[type=submit],[type=button],[role=button]).secondary:focus,.cabinet-page :is(button,[type=submit],[type=button],[role=button]).secondary:is([aria-current]:not([aria-current=false])):focus,.cabinet-page [type=file]::file-selector-button:focus,.cabinet-page [type=file]::file-selector-button:is([aria-current]:not([aria-current=false])):focus,.cabinet-page [type=reset]:focus,.cabinet-page [type=reset]:is([aria-current]:not([aria-current=false])):focus{--pico-box-shadow:var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),0 0 0 var(--pico-outline-width) var(--pico-secondary-focus)}.cabinet-page :is(button,[type=submit],[type=button],[role=button]).contrast{--pico-background-color:var(--pico-contrast-background);--pico-border-color:var(--pico-contrast-border);--pico-color:var(--pico-contrast-inverse)}.cabinet-page :is(button,[type=submit],[type=button],[role=button]).contrast:is([aria-current]:not([aria-current=false]),:hover,:active,:focus){--pico-background-color:var(--pico-contrast-hover-background);--pico-border-color:var(--pico-contrast-hover-border);--pico-color:var(--pico-contrast-inverse)}.cabinet-page :is(button,[type=submit],[type=button],[role=button]).contrast:focus,.cabinet-page :is(button,[type=submit],[type=button],[role=button]).contrast:is([aria-current]:not([aria-current=false])):focus{--pico-box-shadow:var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),0 0 0 var(--pico-outline-width) var(--pico-contrast-focus)}.cabinet-page :is(button,[type=submit],[type=button],[role=button]).outline,.cabinet-page [type=reset].outline{--pico-background-color:transparent;--pico-color:var(--pico-primary);--pico-border-color:var(--pico-primary)}.cabinet-page :is(button,[type=submit],[type=button],[role=button]).outline:is([aria-current]:not([aria-current=false]),:hover,:active,:focus),.cabinet-page [type=reset].outline:is([aria-current]:not([aria-current=false]),:hover,:active,:focus){--pico-background-color:transparent;--pico-color:var(--pico-primary-hover);--pico-border-color:var(--pico-primary-hover)}.cabinet-page :is(button,[type=submit],[type=button],[role=button]).outline.secondary,.cabinet-page [type=reset].outline{--pico-color:var(--pico-secondary);--pico-border-color:var(--pico-secondary)}.cabinet-page :is(button,[type=submit],[type=button],[role=button]).outline.secondary:is([aria-current]:not([aria-current=false]),:hover,:active,:focus),.cabinet-page [type=reset].outline:is([aria-current]:not([aria-current=false]),:hover,:active,:focus){--pico-color:var(--pico-secondary-hover);--pico-border-color:var(--pico-secondary-hover)}.cabinet-page :is(button,[type=submit],[type=button],[role=button]).outline.contrast{--pico-color:var(--pico-contrast);--pico-border-color:var(--pico-contrast)}.cabinet-page :is(button,[type=submit],[type=button],[role=button]).outline.contrast:is([aria-current]:not([aria-current=false]),:hover,:active,:focus){--pico-color:var(--pico-contrast-hover);--pico-border-color:var(--pico-contrast-hover)}.cabinet-page :where(button,[type=submit],[type=reset],[type=button],[role=button])[disabled],.cabinet-page :where(fieldset[disabled]) :is(button,[type=submit],[type=button],[type=reset],[role=button]){opacity:.5;pointer-events:none}.cabinet-page :where(table){width:100%;border-collapse:collapse;border-spacing:0;text-indent:0}.cabinet-page td,.cabinet-page th{padding:calc(var(--pico-spacing)/ 2) var(--pico-spacing);border-bottom:var(--pico-border-width) solid var(--pico-table-border-color);background-color:var(--pico-background-color);color:var(--pico-color);font-weight:var(--pico-font-weight);text-align:left;text-align:start}.cabinet-page tfoot td,.cabinet-page tfoot th{border-top:var(--pico-border-width) solid var(--pico-table-border-color);border-bottom:0}.cabinet-page table.striped tbody tr:nth-child(odd) td,.cabinet-page table.striped tbody tr:nth-child(odd) th{background-color:var(--pico-table-row-stripped-background-color)}.cabinet-page :where(audio,canvas,iframe,img,svg,video){vertical-align:middle}.cabinet-page audio,.cabinet-page video{display:inline-block}.cabinet-page audio:not([controls]){display:none;height:0}.cabinet-page :where(iframe){border-style:none}.cabinet-page img{max-width:100%;height:auto;border-style:none}.cabinet-page :where(svg:not([fill])){fill:currentColor}svg:not(.cabinet-page){overflow:hidden}.cabinet-page code,.cabinet-page kbd,.cabinet-page pre,.cabinet-page samp{font-size:.875em;font-family:var(--pico-font-family)}.cabinet-page pre code{font-size:inherit;font-family:inherit}.cabinet-page pre{-ms-overflow-style:scrollbar;overflow:auto}.cabinet-page code,.cabinet-page kbd,.cabinet-page pre{border-radius:var(--pico-border-radius);background:var(--pico-code-background-color);color:var(--pico-code-color);font-weight:var(--pico-font-weight);line-height:initial}.cabinet-page code,.cabinet-page kbd{display:inline-block;padding:.375rem}.cabinet-page pre{display:block;margin-bottom:var(--pico-spacing);overflow-x:auto}.cabinet-page pre>code{display:block;padding:var(--pico-spacing);background:0 0;line-height:var(--pico-line-height)}.cabinet-page kbd{background-color:var(--pico-code-kbd-background-color);color:var(--pico-code-kbd-color);vertical-align:baseline}.cabinet-page figure{display:block;margin:0;padding:0}.cabinet-page figure figcaption{padding:calc(var(--pico-spacing) * .5) 0;color:var(--pico-muted-color)}.cabinet-page hr{height:0;margin:var(--pico-typography-spacing-vertical) 0;border:0;border-top:1px solid var(--pico-muted-border-color);color:inherit}.cabinet-page [hidden],.cabinet-page template{display:none!important}.cabinet-page canvas{display:inline-block}.cabinet-page input,.cabinet-page optgroup,.cabinet-page select,.cabinet-page textarea{margin:0;font-size:1rem;line-height:var(--pico-line-height);font-family:inherit;letter-spacing:inherit}.cabinet-page input{overflow:visible}.cabinet-page select{text-transform:none}.cabinet-page legend{max-width:100%;padding:0;color:inherit;white-space:normal}.cabinet-page textarea{overflow:auto}.cabinet-page [type=checkbox],.cabinet-page [type=radio]{padding:0}.cabinet-page ::-webkit-inner-spin-button,.cabinet-page ::-webkit-outer-spin-button{height:auto}.cabinet-page [type=search]{-webkit-appearance:textfield;outline-offset:-2px}.cabinet-page [type=search]::-webkit-search-decoration{-webkit-appearance:none}.cabinet-page ::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}.cabinet-page ::-moz-focus-inner{padding:0;border-style:none}.cabinet-page :-moz-focusring{outline:0}.cabinet-page :-moz-ui-invalid{box-shadow:none}.cabinet-page ::-ms-expand{display:none}.cabinet-page [type=file],.cabinet-page [type=range]{padding:0;border-width:0}.cabinet-page input:not([type=checkbox],[type=radio],[type=range]){height:calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2)}.cabinet-page fieldset{width:100%;margin:0;margin-bottom:var(--pico-spacing);padding:0;border:0}.cabinet-page fieldset legend,.cabinet-page label{display:block;margin-bottom:calc(var(--pico-spacing) * .375);color:var(--pico-color);font-weight:var(--pico-form-label-font-weight,var(--pico-font-weight))}.cabinet-page fieldset legend{margin-bottom:calc(var(--pico-spacing) * .5)}.cabinet-page button[type=submit],.cabinet-page input:not([type=checkbox],[type=radio]),.cabinet-page select,.cabinet-page textarea{width:100%}.cabinet-page input:not([type=checkbox],[type=radio],[type=range],[type=file]),.cabinet-page select,.cabinet-page textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal)}.cabinet-page input,.cabinet-page select,.cabinet-page textarea{--pico-background-color:var(--pico-form-element-background-color);--pico-border-color:var(--pico-form-element-border-color);--pico-color:var(--pico-form-element-color);--pico-box-shadow:none;border:var(--pico-border-width) solid var(--pico-border-color);border-radius:var(--pico-border-radius);outline:0;background-color:var(--pico-background-color);box-shadow:var(--pico-box-shadow);color:var(--pico-color);font-weight:var(--pico-font-weight);transition:background-color var(--pico-transition),border-color var(--pico-transition),color var(--pico-transition),box-shadow var(--pico-transition)}.cabinet-page :where(select,textarea):not([readonly]):is(:active,:focus),.cabinet-page input:not([type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[readonly]):is(:active,:focus){--pico-background-color:var(--pico-form-element-active-background-color)}.cabinet-page :where(select,textarea):not([readonly]):is(:active,:focus),.cabinet-page input:not([type=submit],[type=button],[type=reset],[role=switch],[readonly]):is(:active,:focus){--pico-border-color:var(--pico-form-element-active-border-color)}.cabinet-page :where(select,textarea):not([readonly]):focus,.cabinet-page input:not([type=submit],[type=button],[type=reset],[type=range],[type=file],[readonly]):focus{--pico-box-shadow:0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color)}.cabinet-page :where(fieldset[disabled]) :is(input:not([type=submit],[type=button],[type=reset]),select,textarea),.cabinet-page input:not([type=submit],[type=button],[type=reset])[disabled],.cabinet-page label[aria-disabled=true],.cabinet-page select[disabled],.cabinet-page textarea[disabled]{opacity:var(--pico-form-element-disabled-opacity);pointer-events:none}.cabinet-page label[aria-disabled=true] input[disabled]{opacity:1}.cabinet-page :where(input,select,textarea):not([type=checkbox],[type=radio],[type=date],[type=datetime-local],[type=month],[type=time],[type=week],[type=range])[aria-invalid]{padding-right:calc(var(--pico-form-element-spacing-horizontal) + 1.5rem)!important;padding-left:var(--pico-form-element-spacing-horizontal);padding-inline-start:var(--pico-form-element-spacing-horizontal)!important;padding-inline-end:calc(var(--pico-form-element-spacing-horizontal) + 1.5rem)!important;background-position:center right .75rem;background-size:1rem auto;background-repeat:no-repeat}.cabinet-page :where(input,select,textarea):not([type=checkbox],[type=radio],[type=date],[type=datetime-local],[type=month],[type=time],[type=week],[type=range])[aria-invalid=false]:not(select){background-image:var(--pico-icon-valid)}.cabinet-page :where(input,select,textarea):not([type=checkbox],[type=radio],[type=date],[type=datetime-local],[type=month],[type=time],[type=week],[type=range])[aria-invalid=true]:not(select){background-image:var(--pico-icon-invalid)}.cabinet-page :where(input,select,textarea)[aria-invalid=false]{--pico-border-color:var(--pico-form-element-valid-border-color)}.cabinet-page :where(input,select,textarea)[aria-invalid=false]:is(:active,:focus){--pico-border-color:var(--pico-form-element-valid-active-border-color)!important}.cabinet-page :where(input,select,textarea)[aria-invalid=false]:is(:active,:focus):not([type=checkbox],[type=radio]){--pico-box-shadow:0 0 0 var(--pico-outline-width) var(--pico-form-element-valid-focus-color)!important}.cabinet-page :where(input,select,textarea)[aria-invalid=true]{--pico-border-color:var(--pico-form-element-invalid-border-color)}.cabinet-page :where(input,select,textarea)[aria-invalid=true]:is(:active,:focus){--pico-border-color:var(--pico-form-element-invalid-active-border-color)!important}.cabinet-page :where(input,select,textarea)[aria-invalid=true]:is(:active,:focus):not([type=checkbox],[type=radio]){--pico-box-shadow:0 0 0 var(--pico-outline-width) var(--pico-form-element-invalid-focus-color)!important}.cabinet-page [dir=rtl] :where(input,select,textarea):not([type=checkbox],[type=radio]):is([aria-invalid],[aria-invalid=true],[aria-invalid=false]){background-position:center left .75rem}.cabinet-page input::-webkit-input-placeholder,.cabinet-page input::placeholder,.cabinet-page select:invalid,.cabinet-page textarea::-webkit-input-placeholder,.cabinet-page textarea::placeholder{color:var(--pico-form-element-placeholder-color);opacity:1}.cabinet-page input:not([type=checkbox],[type=radio]),.cabinet-page select,.cabinet-page textarea{margin-bottom:var(--pico-spacing)}.cabinet-page select::-ms-expand{border:0;background-color:transparent}.cabinet-page select:not([multiple],[size]){padding-right:calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);padding-left:var(--pico-form-element-spacing-horizontal);padding-inline-start:var(--pico-form-element-spacing-horizontal);padding-inline-end:calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);background-image:var(--pico-icon-chevron);background-position:center right .75rem;background-size:1rem auto;background-repeat:no-repeat}.cabinet-page select[multiple] option:checked{background:var(--pico-form-element-selected-background-color);color:var(--pico-form-element-color)}.cabinet-page [dir=rtl] select:not([multiple],[size]){background-position:center left .75rem}.cabinet-page textarea{display:block;resize:vertical}.cabinet-page textarea[aria-invalid]{--pico-icon-height:calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);background-position:top right .75rem!important;background-size:1rem var(--pico-icon-height)!important}.cabinet-page :where(input,select,textarea,fieldset,.grid)+small{display:block;width:100%;margin-top:calc(var(--pico-spacing) * -.75);margin-bottom:var(--pico-spacing);color:var(--pico-muted-color)}.cabinet-page :where(input,select,textarea,fieldset,.grid)[aria-invalid=false]+small{color:var(--pico-ins-color)}.cabinet-page :where(input,select,textarea,fieldset,.grid)[aria-invalid=true]+small{color:var(--pico-del-color)}.cabinet-page label>:where(input,select,textarea){margin-top:calc(var(--pico-spacing) * .25)}.cabinet-page label:has([type=checkbox],[type=radio]){width:-moz-fit-content;width:fit-content;cursor:pointer}.cabinet-page [type=checkbox],.cabinet-page [type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:1.25em;height:1.25em;margin-top:-.125em;margin-inline-end:.5em;border-width:var(--pico-border-width);vertical-align:middle;cursor:pointer}.cabinet-page [type=checkbox]::-ms-check,.cabinet-page [type=radio]::-ms-check{display:none}.cabinet-page [type=checkbox]:checked,.cabinet-page [type=checkbox]:checked:active,.cabinet-page [type=checkbox]:checked:focus,.cabinet-page [type=radio]:checked,.cabinet-page [type=radio]:checked:active,.cabinet-page [type=radio]:checked:focus{--pico-background-color:var(--pico-primary-background);--pico-border-color:var(--pico-primary-border);background-image:var(--pico-icon-checkbox);background-position:center;background-size:.75em auto;background-repeat:no-repeat}.cabinet-page [type=checkbox]~label,.cabinet-page [type=radio]~label{display:inline-block;margin-bottom:0;cursor:pointer}.cabinet-page [type=checkbox]~label:not(:last-of-type),.cabinet-page [type=radio]~label:not(:last-of-type){margin-inline-end:1em}.cabinet-page [type=checkbox]:indeterminate{--pico-background-color:var(--pico-primary-background);--pico-border-color:var(--pico-primary-border);background-image:var(--pico-icon-minus);background-position:center;background-size:.75em auto;background-repeat:no-repeat}.cabinet-page [type=radio]{border-radius:50%}.cabinet-page [type=radio]:checked,.cabinet-page [type=radio]:checked:active,.cabinet-page [type=radio]:checked:focus{--pico-background-color:var(--pico-primary-inverse);border-width:.35em;background-image:none}.cabinet-page [type=checkbox][role=switch]{--pico-background-color:var(--pico-switch-background-color);--pico-color:var(--pico-switch-color);width:2.25em;height:1.25em;border:var(--pico-border-width) solid var(--pico-border-color);border-radius:1.25em;background-color:var(--pico-background-color);line-height:1.25em}.cabinet-page [type=checkbox][role=switch]:not([aria-invalid]){--pico-border-color:var(--pico-switch-background-color)}.cabinet-page [type=checkbox][role=switch]:before{display:block;aspect-ratio:1;height:100%;border-radius:50%;background-color:var(--pico-color);box-shadow:var(--pico-switch-thumb-box-shadow);content:"";transition:margin .1s ease-in-out}.cabinet-page [type=checkbox][role=switch]:focus{--pico-background-color:var(--pico-switch-background-color);--pico-border-color:var(--pico-switch-background-color)}.cabinet-page [type=checkbox][role=switch]:checked{--pico-background-color:var(--pico-switch-checked-background-color);--pico-border-color:var(--pico-switch-checked-background-color);background-image:none}.cabinet-page [type=checkbox][role=switch]:checked::before{margin-inline-start:calc(2.25em - 1.25em)}.cabinet-page [type=checkbox][role=switch][disabled]{--pico-background-color:var(--pico-border-color)}.cabinet-page [type=checkbox][aria-invalid=false]:checked,.cabinet-page [type=checkbox][aria-invalid=false]:checked:active,.cabinet-page [type=checkbox][aria-invalid=false]:checked:focus,.cabinet-page [type=checkbox][role=switch][aria-invalid=false]:checked,.cabinet-page [type=checkbox][role=switch][aria-invalid=false]:checked:active,.cabinet-page [type=checkbox][role=switch][aria-invalid=false]:checked:focus{--pico-background-color:var(--pico-form-element-valid-border-color)}.cabinet-page [type=checkbox]:checked:active[aria-invalid=true],.cabinet-page [type=checkbox]:checked:focus[aria-invalid=true],.cabinet-page [type=checkbox]:checked[aria-invalid=true],.cabinet-page [type=checkbox][role=switch]:checked:active[aria-invalid=true],.cabinet-page [type=checkbox][role=switch]:checked:focus[aria-invalid=true],.cabinet-page [type=checkbox][role=switch]:checked[aria-invalid=true]{--pico-background-color:var(--pico-form-element-invalid-border-color)}.cabinet-page [type=checkbox][aria-invalid=false]:checked,.cabinet-page [type=checkbox][aria-invalid=false]:checked:active,.cabinet-page [type=checkbox][aria-invalid=false]:checked:focus,.cabinet-page [type=checkbox][role=switch][aria-invalid=false]:checked,.cabinet-page [type=checkbox][role=switch][aria-invalid=false]:checked:active,.cabinet-page [type=checkbox][role=switch][aria-invalid=false]:checked:focus,.cabinet-page [type=radio][aria-invalid=false]:checked,.cabinet-page [type=radio][aria-invalid=false]:checked:active,.cabinet-page [type=radio][aria-invalid=false]:checked:focus{--pico-border-color:var(--pico-form-element-valid-border-color)}.cabinet-page [type=checkbox]:checked:active[aria-invalid=true],.cabinet-page [type=checkbox]:checked:focus[aria-invalid=true],.cabinet-page [type=checkbox]:checked[aria-invalid=true],.cabinet-page [type=checkbox][role=switch]:checked:active[aria-invalid=true],.cabinet-page [type=checkbox][role=switch]:checked:focus[aria-invalid=true],.cabinet-page [type=checkbox][role=switch]:checked[aria-invalid=true],.cabinet-page [type=radio]:checked:active[aria-invalid=true],.cabinet-page [type=radio]:checked:focus[aria-invalid=true],.cabinet-page [type=radio]:checked[aria-invalid=true]{--pico-border-color:var(--pico-form-element-invalid-border-color)}.cabinet-page [type=color]::-webkit-color-swatch-wrapper{padding:0}.cabinet-page [type=color]::-moz-focus-inner{padding:0}.cabinet-page [type=color]::-webkit-color-swatch{border:0;border-radius:calc(var(--pico-border-radius) * .5)}.cabinet-page [type=color]::-moz-color-swatch{border:0;border-radius:calc(var(--pico-border-radius) * .5)}.cabinet-page input:not([type=checkbox],[type=radio],[type=range],[type=file]):is([type=date],[type=datetime-local],[type=month],[type=time],[type=week]){--pico-icon-position:0.75rem;--pico-icon-width:1rem;padding-right:calc(var(--pico-icon-width) + var(--pico-icon-position));background-image:var(--pico-icon-date);background-position:center right var(--pico-icon-position);background-size:var(--pico-icon-width) auto;background-repeat:no-repeat}.cabinet-page input:not([type=checkbox],[type=radio],[type=range],[type=file])[type=time]{background-image:var(--pico-icon-time)}.cabinet-page [type=date]::-webkit-calendar-picker-indicator,.cabinet-page [type=datetime-local]::-webkit-calendar-picker-indicator,.cabinet-page [type=month]::-webkit-calendar-picker-indicator,.cabinet-page [type=time]::-webkit-calendar-picker-indicator,.cabinet-page [type=week]::-webkit-calendar-picker-indicator{width:var(--pico-icon-width);margin-right:calc(var(--pico-icon-width) * -1);margin-left:var(--pico-icon-position);opacity:0}@-moz-document url-prefix(){.cabinet-page [type=date],.cabinet-page [type=datetime-local],.cabinet-page [type=month],.cabinet-page [type=time],.cabinet-page [type=week]{padding-right:var(--pico-form-element-spacing-horizontal)!important;background-image:none!important}}.cabinet-page [dir=rtl] :is([type=date],[type=datetime-local],[type=month],[type=time],[type=week]){text-align:right}.cabinet-page [type=file]{--pico-color:var(--pico-muted-color);margin-left:calc(var(--pico-outline-width) * -1);padding:calc(var(--pico-form-element-spacing-vertical) * .5) 0;padding-left:var(--pico-outline-width);border:0;border-radius:0;background:0 0}.cabinet-page [type=file]::file-selector-button{margin-right:calc(var(--pico-spacing)/ 2);padding:calc(var(--pico-form-element-spacing-vertical) * .5) var(--pico-form-element-spacing-horizontal)}.cabinet-page [type=file]:is(:hover,:active,:focus)::file-selector-button{--pico-background-color:var(--pico-secondary-hover-background);--pico-border-color:var(--pico-secondary-hover-border)}.cabinet-page [type=file]:focus::file-selector-button{--pico-box-shadow:var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),0 0 0 var(--pico-outline-width) var(--pico-secondary-focus)}.cabinet-page [type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:1.25rem;background:0 0}.cabinet-page [type=range]::-webkit-slider-runnable-track{width:100%;height:.375rem;border-radius:var(--pico-border-radius);background-color:var(--pico-range-border-color);-webkit-transition:background-color var(--pico-transition),box-shadow var(--pico-transition);transition:background-color var(--pico-transition),box-shadow var(--pico-transition)}.cabinet-page [type=range]::-moz-range-track{width:100%;height:.375rem;border-radius:var(--pico-border-radius);background-color:var(--pico-range-border-color);-moz-transition:background-color var(--pico-transition),box-shadow var(--pico-transition);transition:background-color var(--pico-transition),box-shadow var(--pico-transition)}.cabinet-page [type=range]::-ms-track{width:100%;height:.375rem;border-radius:var(--pico-border-radius);background-color:var(--pico-range-border-color);-ms-transition:background-color var(--pico-transition),box-shadow var(--pico-transition);transition:background-color var(--pico-transition),box-shadow var(--pico-transition)}.cabinet-page [type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-.4375rem;border:2px solid var(--pico-range-thumb-border-color);border-radius:50%;background-color:var(--pico-range-thumb-color);cursor:pointer;-webkit-transition:background-color var(--pico-transition),transform var(--pico-transition);transition:background-color var(--pico-transition),transform var(--pico-transition)}.cabinet-page [type=range]::-moz-range-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-.4375rem;border:2px solid var(--pico-range-thumb-border-color);border-radius:50%;background-color:var(--pico-range-thumb-color);cursor:pointer;-moz-transition:background-color var(--pico-transition),transform var(--pico-transition);transition:background-color var(--pico-transition),transform var(--pico-transition)}.cabinet-page [type=range]::-ms-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-.4375rem;border:2px solid var(--pico-range-thumb-border-color);border-radius:50%;background-color:var(--pico-range-thumb-color);cursor:pointer;-ms-transition:background-color var(--pico-transition),transform var(--pico-transition);transition:background-color var(--pico-transition),transform var(--pico-transition)}.cabinet-page [type=range]:active,.cabinet-page [type=range]:focus-within{--pico-range-border-color:var(--pico-range-active-border-color);--pico-range-thumb-color:var(--pico-range-thumb-active-color)}.cabinet-page [type=range]:active::-webkit-slider-thumb{transform:scale(1.25)}.cabinet-page [type=range]:active::-moz-range-thumb{transform:scale(1.25)}.cabinet-page [type=range]:active::-ms-thumb{transform:scale(1.25)}.cabinet-page input:not([type=checkbox],[type=radio],[type=range],[type=file])[type=search]{padding-inline-start:calc(var(--pico-form-element-spacing-horizontal) + 1.75rem);background-image:var(--pico-icon-search);background-position:center left calc(var(--pico-form-element-spacing-horizontal) + .125rem);background-size:1rem auto;background-repeat:no-repeat}.cabinet-page input:not([type=checkbox],[type=radio],[type=range],[type=file])[type=search][aria-invalid]{padding-inline-start:calc(var(--pico-form-element-spacing-horizontal) + 1.75rem)!important;background-position:center left 1.125rem,center right .75rem}.cabinet-page input:not([type=checkbox],[type=radio],[type=range],[type=file])[type=search][aria-invalid=false]{background-image:var(--pico-icon-search),var(--pico-icon-valid)}.cabinet-page input:not([type=checkbox],[type=radio],[type=range],[type=file])[type=search][aria-invalid=true]{background-image:var(--pico-icon-search),var(--pico-icon-invalid)}.cabinet-page [dir=rtl] :where(input):not([type=checkbox],[type=radio],[type=range],[type=file])[type=search]{background-position:center right 1.125rem}.cabinet-page [dir=rtl] :where(input):not([type=checkbox],[type=radio],[type=range],[type=file])[type=search][aria-invalid]{background-position:center right 1.125rem,center left .75rem}.cabinet-page details{display:block;margin-bottom:var(--pico-spacing)}.cabinet-page details summary{line-height:1rem;list-style-type:none;cursor:pointer;transition:color var(--pico-transition)}.cabinet-page details summary:not([role]){color:var(--pico-accordion-close-summary-color)}.cabinet-page details summary::-webkit-details-marker{display:none}.cabinet-page details summary::marker{display:none}.cabinet-page details summary::-moz-list-bullet{list-style-type:none}.cabinet-page details summary::after{display:block;width:1rem;height:1rem;margin-inline-start:calc(var(--pico-spacing,1rem) * .5);float:right;transform:rotate(-90deg);background-image:var(--pico-icon-chevron);background-position:right center;background-size:1rem auto;background-repeat:no-repeat;content:"";transition:transform var(--pico-transition)}.cabinet-page details summary:focus{outline:0}.cabinet-page details summary:focus:not([role]){color:var(--pico-accordion-active-summary-color)}.cabinet-page details summary:focus-visible:not([role]){outline:var(--pico-outline-width) solid var(--pico-primary-focus);outline-offset:calc(var(--pico-spacing,1rem) * 0.5);color:var(--pico-primary)}.cabinet-page details summary[role=button]{width:100%;text-align:left}.cabinet-page details summary[role=button]::after{height:calc(1rem * var(--pico-line-height,1.5))}.cabinet-page details[open]>summary{margin-bottom:var(--pico-spacing)}.cabinet-page details[open]>summary:not([role]):not(:focus){color:var(--pico-accordion-open-summary-color)}.cabinet-page details[open]>summary::after{transform:rotate(0)}.cabinet-page [dir=rtl] details summary{text-align:right}.cabinet-page [dir=rtl] details summary::after{float:left;background-position:left center}.cabinet-page article{margin-bottom:var(--pico-block-spacing-vertical);padding:var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);border-radius:var(--pico-border-radius);background:var(--pico-card-background-color);box-shadow:var(--pico-card-box-shadow)}.cabinet-page article>footer,.cabinet-page article>header{margin-right:calc(var(--pico-block-spacing-horizontal) * -1);margin-left:calc(var(--pico-block-spacing-horizontal) * -1);padding:calc(var(--pico-block-spacing-vertical) * .66) var(--pico-block-spacing-horizontal);background-color:var(--pico-card-sectioning-background-color)}.cabinet-page article>header{margin-top:calc(var(--pico-block-spacing-vertical) * -1);margin-bottom:var(--pico-block-spacing-vertical);border-bottom:var(--pico-border-width) solid var(--pico-card-border-color);border-top-right-radius:var(--pico-border-radius);border-top-left-radius:var(--pico-border-radius)}.cabinet-page article>footer{margin-top:var(--pico-block-spacing-vertical);margin-bottom:calc(var(--pico-block-spacing-vertical) * -1);border-top:var(--pico-border-width) solid var(--pico-card-border-color);border-bottom-right-radius:var(--pico-border-radius);border-bottom-left-radius:var(--pico-border-radius)}.cabinet-page details.dropdown{position:relative;border-bottom:none}.cabinet-page details.dropdown summary::after,.cabinet-page details.dropdown>a::after,.cabinet-page details.dropdown>button::after{display:block;width:1rem;height:calc(1rem * var(--pico-line-height,1.5));margin-inline-start:.25rem;float:right;transform:rotate(0) translateX(.2rem);background-image:var(--pico-icon-chevron);background-position:right center;background-size:1rem auto;background-repeat:no-repeat;content:""}.cabinet-page nav details.dropdown{margin-bottom:0}.cabinet-page details.dropdown summary:not([role]){height:calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);padding:var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);border:var(--pico-border-width) solid var(--pico-form-element-border-color);border-radius:var(--pico-border-radius);background-color:var(--pico-form-element-background-color);color:var(--pico-form-element-placeholder-color);line-height:inherit;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:background-color var(--pico-transition),border-color var(--pico-transition),color var(--pico-transition),box-shadow var(--pico-transition)}.cabinet-page details.dropdown summary:not([role]):active,.cabinet-page details.dropdown summary:not([role]):focus{border-color:var(--pico-form-element-active-border-color);background-color:var(--pico-form-element-active-background-color)}.cabinet-page details.dropdown summary:not([role]):focus{box-shadow:0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color)}.cabinet-page details.dropdown summary:not([role]):focus-visible{outline:0}.cabinet-page details.dropdown summary:not([role])[aria-invalid=false]{--pico-form-element-border-color:var(--pico-form-element-valid-border-color);--pico-form-element-active-border-color:var(--pico-form-element-valid-focus-color);--pico-form-element-focus-color:var(--pico-form-element-valid-focus-color)}.cabinet-page details.dropdown summary:not([role])[aria-invalid=true]{--pico-form-element-border-color:var(--pico-form-element-invalid-border-color);--pico-form-element-active-border-color:var(--pico-form-element-invalid-focus-color);--pico-form-element-focus-color:var(--pico-form-element-invalid-focus-color)}.cabinet-page nav details.dropdown{display:inline;margin:calc(var(--pico-nav-element-spacing-vertical) * -1) 0}.cabinet-page nav details.dropdown summary::after{transform:rotate(0) translateX(0)}.cabinet-page nav details.dropdown summary:not([role]){height:calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);padding:calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal)}.cabinet-page nav details.dropdown summary:not([role]):focus-visible{box-shadow:0 0 0 var(--pico-outline-width) var(--pico-primary-focus)}.cabinet-page details.dropdown summary+ul{display:flex;z-index:99;position:absolute;left:0;flex-direction:column;width:100%;min-width:-moz-fit-content;min-width:fit-content;margin:0;margin-top:var(--pico-outline-width);padding:0;border:var(--pico-border-width) solid var(--pico-dropdown-border-color);border-radius:var(--pico-border-radius);background-color:var(--pico-dropdown-background-color);box-shadow:var(--pico-dropdown-box-shadow);color:var(--pico-dropdown-color);white-space:nowrap;opacity:0;transition:opacity var(--pico-transition),transform 0s ease-in-out 1s}.cabinet-page details.dropdown summary+ul[dir=rtl]{right:0;left:auto}.cabinet-page details.dropdown summary+ul li{width:100%;margin-bottom:0;padding:calc(var(--pico-form-element-spacing-vertical) * .5) var(--pico-form-element-spacing-horizontal);list-style:none}.cabinet-page details.dropdown summary+ul li:first-of-type{margin-top:calc(var(--pico-form-element-spacing-vertical) * .5)}.cabinet-page details.dropdown summary+ul li:last-of-type{margin-bottom:calc(var(--pico-form-element-spacing-vertical) * .5)}.cabinet-page details.dropdown summary+ul li a{display:block;margin:calc(var(--pico-form-element-spacing-vertical) * -.5) calc(var(--pico-form-element-spacing-horizontal) * -1);padding:calc(var(--pico-form-element-spacing-vertical) * .5) var(--pico-form-element-spacing-horizontal);overflow:hidden;border-radius:0;color:var(--pico-dropdown-color);text-decoration:none;text-overflow:ellipsis}.cabinet-page details.dropdown summary+ul li a:active,.cabinet-page details.dropdown summary+ul li a:focus,.cabinet-page details.dropdown summary+ul li a:focus-visible,.cabinet-page details.dropdown summary+ul li a:hover,.cabinet-page details.dropdown summary+ul li a[aria-current]:not([aria-current=false]){background-color:var(--pico-dropdown-hover-background-color)}.cabinet-page details.dropdown summary+ul li label{width:100%}.cabinet-page details.dropdown summary+ul li:has(label):hover{background-color:var(--pico-dropdown-hover-background-color)}.cabinet-page details.dropdown[open] summary{margin-bottom:0}.cabinet-page details.dropdown[open] summary+ul{transform:scaleY(1);opacity:1;transition:opacity var(--pico-transition),transform 0s ease-in-out 0s}.cabinet-page details.dropdown[open] summary::before{display:block;z-index:1;position:fixed;width:100vw;height:100vh;inset:0;background:0 0;content:"";cursor:default}.cabinet-page label>details.dropdown{margin-top:calc(var(--pico-spacing) * .25)}.cabinet-page [role=group],.cabinet-page [role=search]{display:inline-flex;position:relative;width:100%;margin-bottom:var(--pico-spacing);border-radius:var(--pico-border-radius);box-shadow:var(--pico-group-box-shadow,0 0 0 transparent);vertical-align:middle;transition:box-shadow var(--pico-transition)}.cabinet-page [role=group] input:not([type=checkbox],[type=radio]),.cabinet-page [role=group] select,.cabinet-page [role=group]>*,.cabinet-page [role=search] input:not([type=checkbox],[type=radio]),.cabinet-page [role=search] select,.cabinet-page [role=search]>*{position:relative;flex:1 1 auto;margin-bottom:0}.cabinet-page [role=group] input:not([type=checkbox],[type=radio]):not(:first-child),.cabinet-page [role=group] select:not(:first-child),.cabinet-page [role=group]>:not(:first-child),.cabinet-page [role=search] input:not([type=checkbox],[type=radio]):not(:first-child),.cabinet-page [role=search] select:not(:first-child),.cabinet-page [role=search]>:not(:first-child){margin-left:0;border-top-left-radius:0;border-bottom-left-radius:0}.cabinet-page [role=group] input:not([type=checkbox],[type=radio]):not(:last-child),.cabinet-page [role=group] select:not(:last-child),.cabinet-page [role=group]>:not(:last-child),.cabinet-page [role=search] input:not([type=checkbox],[type=radio]):not(:last-child),.cabinet-page [role=search] select:not(:last-child),.cabinet-page [role=search]>:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.cabinet-page [role=group] input:not([type=checkbox],[type=radio]):focus,.cabinet-page [role=group] select:focus,.cabinet-page [role=group]>:focus,.cabinet-page [role=search] input:not([type=checkbox],[type=radio]):focus,.cabinet-page [role=search] select:focus,.cabinet-page [role=search]>:focus{z-index:2}.cabinet-page [role=group] [role=button]:not(:first-child),.cabinet-page [role=group] [type=button]:not(:first-child),.cabinet-page [role=group] [type=reset]:not(:first-child),.cabinet-page [role=group] [type=submit]:not(:first-child),.cabinet-page [role=group] button:not(:first-child),.cabinet-page [role=group] input:not([type=checkbox],[type=radio]):not(:first-child),.cabinet-page [role=group] select:not(:first-child),.cabinet-page [role=search] [role=button]:not(:first-child),.cabinet-page [role=search] [type=button]:not(:first-child),.cabinet-page [role=search] [type=reset]:not(:first-child),.cabinet-page [role=search] [type=submit]:not(:first-child),.cabinet-page [role=search] button:not(:first-child),.cabinet-page [role=search] input:not([type=checkbox],[type=radio]):not(:first-child),.cabinet-page [role=search] select:not(:first-child){margin-left:calc(var(--pico-border-width) * -1)}.cabinet-page [role=group] [role=button],.cabinet-page [role=group] [type=button],.cabinet-page [role=group] [type=reset],.cabinet-page [role=group] [type=submit],.cabinet-page [role=group] button,.cabinet-page [role=search] [role=button],.cabinet-page [role=search] [type=button],.cabinet-page [role=search] [type=reset],.cabinet-page [role=search] [type=submit],.cabinet-page [role=search] button{width:auto}@supports selector(:has(*)){.cabinet-page [role=group]:has(button:focus,[type=submit]:focus,[type=button]:focus,[role=button]:focus),.cabinet-page [role=search]:has(button:focus,[type=submit]:focus,[type=button]:focus,[role=button]:focus){--pico-group-box-shadow:var(--pico-group-box-shadow-focus-with-button)}.cabinet-page [role=group]:has(button:focus,[type=submit]:focus,[type=button]:focus,[role=button]:focus) input:not([type=checkbox],[type=radio]),.cabinet-page [role=group]:has(button:focus,[type=submit]:focus,[type=button]:focus,[role=button]:focus) select,.cabinet-page [role=search]:has(button:focus,[type=submit]:focus,[type=button]:focus,[role=button]:focus) input:not([type=checkbox],[type=radio]),.cabinet-page [role=search]:has(button:focus,[type=submit]:focus,[type=button]:focus,[role=button]:focus) select{border-color:transparent}.cabinet-page [role=group]:has(input:not([type=submit],[type=button]):focus,select:focus),.cabinet-page [role=search]:has(input:not([type=submit],[type=button]):focus,select:focus){--pico-group-box-shadow:var(--pico-group-box-shadow-focus-with-input)}.cabinet-page [role=group]:has(input:not([type=submit],[type=button]):focus,select:focus) [role=button],.cabinet-page [role=group]:has(input:not([type=submit],[type=button]):focus,select:focus) [type=button],.cabinet-page [role=group]:has(input:not([type=submit],[type=button]):focus,select:focus) [type=submit],.cabinet-page [role=group]:has(input:not([type=submit],[type=button]):focus,select:focus) button,.cabinet-page [role=search]:has(input:not([type=submit],[type=button]):focus,select:focus) [role=button],.cabinet-page [role=search]:has(input:not([type=submit],[type=button]):focus,select:focus) [type=button],.cabinet-page [role=search]:has(input:not([type=submit],[type=button]):focus,select:focus) [type=submit],.cabinet-page [role=search]:has(input:not([type=submit],[type=button]):focus,select:focus) button{--pico-button-box-shadow:0 0 0 var(--pico-border-width) var(--pico-primary-border);--pico-button-hover-box-shadow:0 0 0 var(--pico-border-width) var(--pico-primary-hover-border)}.cabinet-page [role=group] [role=button]:focus,.cabinet-page [role=group] [type=button]:focus,.cabinet-page [role=group] [type=reset]:focus,.cabinet-page [role=group] [type=submit]:focus,.cabinet-page [role=group] button:focus,.cabinet-page [role=search] [role=button]:focus,.cabinet-page [role=search] [type=button]:focus,.cabinet-page [role=search] [type=reset]:focus,.cabinet-page [role=search] [type=submit]:focus,.cabinet-page [role=search] button:focus{box-shadow:none}}.cabinet-page [role=search]>:first-child{border-top-left-radius:5rem;border-bottom-left-radius:5rem}.cabinet-page [role=search]>:last-child{border-top-right-radius:5rem;border-bottom-right-radius:5rem}.cabinet-page [aria-busy=true]:not(input,select,textarea,html){white-space:nowrap}.cabinet-page [aria-busy=true]:not(input,select,textarea,html)::before{display:inline-block;width:1em;height:1em;background-image:var(--pico-icon-loading);background-size:1em auto;background-repeat:no-repeat;content:"";vertical-align:-.125em}.cabinet-page [aria-busy=true]:not(input,select,textarea,html):not(:empty)::before{margin-inline-end:calc(var(--pico-spacing) * .5)}.cabinet-page [aria-busy=true]:not(input,select,textarea,html):empty{text-align:center}.cabinet-page [role=button][aria-busy=true],.cabinet-page [type=button][aria-busy=true],.cabinet-page [type=reset][aria-busy=true],.cabinet-page [type=submit][aria-busy=true],.cabinet-page a[aria-busy=true],.cabinet-page button[aria-busy=true]{pointer-events:none}.cabinet-page{--pico-scrollbar-width:0px}.cabinet-page dialog{display:flex;z-index:999;position:fixed;top:0;right:0;bottom:0;left:0;align-items:center;justify-content:center;width:inherit;min-width:100%;height:inherit;min-height:100%;padding:0;border:0;-webkit-backdrop-filter:var(--pico-modal-overlay-backdrop-filter);backdrop-filter:var(--pico-modal-overlay-backdrop-filter);background-color:var(--pico-modal-overlay-background-color);color:var(--pico-color)}.cabinet-page dialog article{width:100%;max-height:calc(100vh - var(--pico-spacing) * 2);margin:var(--pico-spacing);overflow:auto}@media (min-width:576px){.cabinet-page dialog article{max-width:510px}}@media (min-width:768px){.cabinet-page dialog article{max-width:700px}}.cabinet-page dialog article>header>*{margin-bottom:0}.cabinet-page dialog article>header .close,.cabinet-page dialog article>header :is(a,button)[rel=prev]{margin:0;margin-left:var(--pico-spacing);padding:0;float:right}.cabinet-page dialog article>footer{text-align:right}.cabinet-page dialog article>footer [role=button],.cabinet-page dialog article>footer button{margin-bottom:0}.cabinet-page dialog article>footer [role=button]:not(:first-of-type),.cabinet-page dialog article>footer button:not(:first-of-type){margin-left:calc(var(--pico-spacing) * .5)}.cabinet-page dialog article .close,.cabinet-page dialog article :is(a,button)[rel=prev]{display:block;width:1rem;height:1rem;margin-top:calc(var(--pico-spacing) * -1);margin-bottom:var(--pico-spacing);margin-left:auto;border:none;background-image:var(--pico-icon-close);background-position:center;background-size:auto 1rem;background-repeat:no-repeat;background-color:transparent;opacity:.5;transition:opacity var(--pico-transition)}.cabinet-page dialog article .close:is([aria-current]:not([aria-current=false]),:hover,:active,:focus),.cabinet-page dialog article :is(a,button)[rel=prev]:is([aria-current]:not([aria-current=false]),:hover,:active,:focus){opacity:1}.cabinet-page dialog:not([open]),.cabinet-page dialog[open=false]{display:none}.cabinet-page .modal-is-open{padding-right:var(--pico-scrollbar-width,0);overflow:hidden;pointer-events:none;touch-action:none}.cabinet-page .modal-is-open dialog{pointer-events:auto;touch-action:auto}.cabinet-page :where(.modal-is-opening,.modal-is-closing) dialog,.cabinet-page :where(.modal-is-opening,.modal-is-closing) dialog>article{animation-duration:.2s;animation-timing-function:ease-in-out;animation-fill-mode:both}.cabinet-page :where(.modal-is-opening,.modal-is-closing) dialog{animation-duration:.8s;animation-name:modal-overlay}.cabinet-page :where(.modal-is-opening,.modal-is-closing) dialog>article{animation-delay:.2s;animation-name:modal}.cabinet-page .modal-is-closing dialog,.cabinet-page .modal-is-closing dialog>article{animation-delay:0s;animation-direction:reverse}@keyframes modal-overlay{from{-webkit-backdrop-filter:none;backdrop-filter:none;background-color:transparent}}@keyframes modal{from{transform:translateY(-100%);opacity:0}}.cabinet-page :where(nav li)::before{float:left;content:"​"}.cabinet-page nav,.cabinet-page nav ul{display:flex}.cabinet-page nav{justify-content:space-between;overflow:visible}.cabinet-page nav ol,.cabinet-page nav ul{align-items:center;margin-bottom:0;padding:0;list-style:none}.cabinet-page nav ol:first-of-type,.cabinet-page nav ul:first-of-type{margin-left:calc(var(--pico-nav-element-spacing-horizontal) * -1)}.cabinet-page nav ol:last-of-type,.cabinet-page nav ul:last-of-type{margin-right:calc(var(--pico-nav-element-spacing-horizontal) * -1)}.cabinet-page nav li{display:inline-block;margin:0;padding:var(--pico-nav-element-spacing-vertical) var(--pico-nav-element-spacing-horizontal)}.cabinet-page nav li :where(a,[role=link]){display:inline-block;margin:calc(var(--pico-nav-link-spacing-vertical) * -1) calc(var(--pico-nav-link-spacing-horizontal) * -1);padding:var(--pico-nav-link-spacing-vertical) var(--pico-nav-link-spacing-horizontal);border-radius:var(--pico-border-radius)}.cabinet-page nav li :where(a,[role=link]):not(:hover){text-decoration:none}.cabinet-page nav li [role=button],.cabinet-page nav li [type=button],.cabinet-page nav li button,.cabinet-page nav li input:not([type=checkbox],[type=radio],[type=range],[type=file]),.cabinet-page nav li select{height:auto;margin-right:inherit;margin-bottom:0;margin-left:inherit;padding:calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal)}.cabinet-page nav[aria-label=breadcrumb]{align-items:center;justify-content:start}.cabinet-page nav[aria-label=breadcrumb] ul li:not(:first-child){margin-inline-start:var(--pico-nav-link-spacing-horizontal)}.cabinet-page nav[aria-label=breadcrumb] ul li a{margin:calc(var(--pico-nav-link-spacing-vertical) * -1) 0;margin-inline-start:calc(var(--pico-nav-link-spacing-horizontal) * -1)}.cabinet-page nav[aria-label=breadcrumb] ul li:not(:last-child)::after{display:inline-block;position:absolute;width:calc(var(--pico-nav-link-spacing-horizontal) * 4);margin:0 calc(var(--pico-nav-link-spacing-horizontal) * -1);content:var(--pico-nav-breadcrumb-divider);color:var(--pico-muted-color);text-align:center;text-decoration:none;white-space:nowrap}.cabinet-page nav[aria-label=breadcrumb] a[aria-current]:not([aria-current=false]){background-color:transparent;color:inherit;text-decoration:none;pointer-events:none}.cabinet-page aside li,.cabinet-page aside nav,.cabinet-page aside ol,.cabinet-page aside ul{display:block}.cabinet-page aside li{padding:calc(var(--pico-nav-element-spacing-vertical) * .5) var(--pico-nav-element-spacing-horizontal)}.cabinet-page aside li a{display:block}.cabinet-page aside li [role=button]{margin:inherit}.cabinet-page [dir=rtl] nav[aria-label=breadcrumb] ul li:not(:last-child) ::after{content:"\\"}.cabinet-page progress{display:inline-block;vertical-align:baseline}.cabinet-page progress{-webkit-appearance:none;-moz-appearance:none;display:inline-block;appearance:none;width:100%;height:.5rem;margin-bottom:calc(var(--pico-spacing) * .5);overflow:hidden;border:0;border-radius:var(--pico-border-radius);background-color:var(--pico-progress-background-color);color:var(--pico-progress-color)}.cabinet-page progress::-webkit-progress-bar{border-radius:var(--pico-border-radius);background:0 0}.cabinet-page progress[value]::-webkit-progress-value{background-color:var(--pico-progress-color);-webkit-transition:inline-size var(--pico-transition);transition:inline-size var(--pico-transition)}.cabinet-page progress::-moz-progress-bar{background-color:var(--pico-progress-color)}@media (prefers-reduced-motion:no-preference){.cabinet-page progress:indeterminate{background:var(--pico-progress-background-color) linear-gradient(to right,var(--pico-progress-color) 30%,var(--pico-progress-background-color) 30%) top left/150% 150% no-repeat;animation:progress-indeterminate 1s linear infinite}.cabinet-page progress:indeterminate[value]::-webkit-progress-value{background-color:transparent}.cabinet-page progress:indeterminate::-moz-progress-bar{background-color:transparent}}@media (prefers-reduced-motion:no-preference){.cabinet-page [dir=rtl] progress:indeterminate{animation-direction:reverse}}@keyframes progress-indeterminate{0%{background-position:200% 0}100%{background-position:-200% 0}}.cabinet-page [data-tooltip]{position:relative}.cabinet-page [data-tooltip]:not(a,button,input){border-bottom:1px dotted;text-decoration:none;cursor:help}.cabinet-page [data-tooltip]::after,.cabinet-page [data-tooltip]::before,.cabinet-page [data-tooltip][data-placement=top]::after,.cabinet-page [data-tooltip][data-placement=top]::before{display:block;z-index:99;position:absolute;bottom:100%;left:50%;padding:.25rem .5rem;overflow:hidden;transform:translate(-50%,-.25rem);border-radius:var(--pico-border-radius);background:var(--pico-tooltip-background-color);content:attr(data-tooltip);color:var(--pico-tooltip-color);font-style:normal;font-weight:var(--pico-font-weight);font-size:.875rem;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;opacity:0;pointer-events:none}.cabinet-page [data-tooltip]::after,.cabinet-page [data-tooltip][data-placement=top]::after{padding:0;transform:translate(-50%,0);border-top:.3rem solid;border-right:.3rem solid transparent;border-left:.3rem solid transparent;border-radius:0;background-color:transparent;content:"";color:var(--pico-tooltip-background-color)}.cabinet-page [data-tooltip][data-placement=bottom]::after,.cabinet-page [data-tooltip][data-placement=bottom]::before{top:100%;bottom:auto;transform:translate(-50%,.25rem)}.cabinet-page [data-tooltip][data-placement=bottom]:after{transform:translate(-50%,-.3rem);border:.3rem solid transparent;border-bottom:.3rem solid}.cabinet-page [data-tooltip][data-placement=left]::after,.cabinet-page [data-tooltip][data-placement=left]::before{top:50%;right:100%;bottom:auto;left:auto;transform:translate(-.25rem,-50%)}.cabinet-page [data-tooltip][data-placement=left]:after{transform:translate(.3rem,-50%);border:.3rem solid transparent;border-left:.3rem solid}.cabinet-page [data-tooltip][data-placement=right]::after,.cabinet-page [data-tooltip][data-placement=right]::before{top:50%;right:auto;bottom:auto;left:100%;transform:translate(.25rem,-50%)}.cabinet-page [data-tooltip][data-placement=right]:after{transform:translate(-.3rem,-50%);border:.3rem solid transparent;border-right:.3rem solid}.cabinet-page [data-tooltip]:focus::after,.cabinet-page [data-tooltip]:focus::before,.cabinet-page [data-tooltip]:hover::after,.cabinet-page [data-tooltip]:hover::before{opacity:1}@media (hover:hover) and (pointer:fine){.cabinet-page [data-tooltip]:focus::after,.cabinet-page [data-tooltip]:focus::before,.cabinet-page [data-tooltip]:hover::after,.cabinet-page [data-tooltip]:hover::before{--pico-tooltip-slide-to:translate(-50%, -0.25rem);transform:translate(-50%,.75rem);animation-duration:.2s;animation-fill-mode:forwards;animation-name:tooltip-slide;opacity:0}.cabinet-page [data-tooltip]:focus::after,.cabinet-page [data-tooltip]:hover::after{--pico-tooltip-caret-slide-to:translate(-50%, 0rem);transform:translate(-50%,-.25rem);animation-name:tooltip-caret-slide}.cabinet-page [data-tooltip][data-placement=bottom]:focus::after,.cabinet-page [data-tooltip][data-placement=bottom]:focus::before,.cabinet-page [data-tooltip][data-placement=bottom]:hover::after,.cabinet-page [data-tooltip][data-placement=bottom]:hover::before{--pico-tooltip-slide-to:translate(-50%, 0.25rem);transform:translate(-50%,-.75rem);animation-name:tooltip-slide}.cabinet-page [data-tooltip][data-placement=bottom]:focus::after,.cabinet-page [data-tooltip][data-placement=bottom]:hover::after{--pico-tooltip-caret-slide-to:translate(-50%, -0.3rem);transform:translate(-50%,-.5rem);animation-name:tooltip-caret-slide}.cabinet-page [data-tooltip][data-placement=left]:focus::after,.cabinet-page [data-tooltip][data-placement=left]:focus::before,.cabinet-page [data-tooltip][data-placement=left]:hover::after,.cabinet-page [data-tooltip][data-placement=left]:hover::before{--pico-tooltip-slide-to:translate(-0.25rem, -50%);transform:translate(.75rem,-50%);animation-name:tooltip-slide}.cabinet-page [data-tooltip][data-placement=left]:focus::after,.cabinet-page [data-tooltip][data-placement=left]:hover::after{--pico-tooltip-caret-slide-to:translate(0.3rem, -50%);transform:translate(.05rem,-50%);animation-name:tooltip-caret-slide}.cabinet-page [data-tooltip][data-placement=right]:focus::after,.cabinet-page [data-tooltip][data-placement=right]:focus::before,.cabinet-page [data-tooltip][data-placement=right]:hover::after,.cabinet-page [data-tooltip][data-placement=right]:hover::before{--pico-tooltip-slide-to:translate(0.25rem, -50%);transform:translate(-.75rem,-50%);animation-name:tooltip-slide}.cabinet-page [data-tooltip][data-placement=right]:focus::after,.cabinet-page [data-tooltip][data-placement=right]:hover::after{--pico-tooltip-caret-slide-to:translate(-0.3rem, -50%);transform:translate(-.05rem,-50%);animation-name:tooltip-caret-slide}}@keyframes tooltip-slide{to{transform:var(--pico-tooltip-slide-to);opacity:1}}@keyframes tooltip-caret-slide{50%{opacity:0}to{transform:var(--pico-tooltip-caret-slide-to);opacity:1}}.cabinet-page [aria-controls]{cursor:pointer}.cabinet-page [aria-disabled=true],.cabinet-page [disabled]{cursor:not-allowed}.cabinet-page [aria-hidden=false][hidden]{display:initial}.cabinet-page [aria-hidden=false][hidden]:not(:focus){clip:rect(0,0,0,0);position:absolute}.cabinet-page [tabindex],.cabinet-page a,.cabinet-page area,.cabinet-page button,.cabinet-page input,.cabinet-page label,.cabinet-page select,.cabinet-page summary,.cabinet-page textarea{-ms-touch-action:manipulation}.cabinet-page [dir=rtl]{direction:rtl}@media (prefers-reduced-motion:reduce){.cabinet-page :not([aria-busy=true]),.cabinet-page :not([aria-busy=true])::after,.cabinet-page :not([aria-busy=true])::before{background-attachment:initial!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:0s!important}}
.cabinet-page [data-theme="light"]     { color-scheme: light; }
.cabinet-page [data-theme="dark"]      { color-scheme: dark; }

.cabinet-page {
}
.cabinet-page[data-theme="violet"] {
    color-scheme:          dark;
}
.cabinet-page [data-theme="caramel"] {
    color-scheme:          light;
}
.cabinet-page [data-theme="matcha"] {
    color-scheme:          light;
}

.cabinet-page,.cabinet-page:not([data-theme]),.cabinet-page[data-theme] {
    --pico-background-color:                 var(--app-bg);
    --pico-primary:                          var(--app-accent);
    --pico-primary-background:               var(--app-accent);
    --pico-primary-border:                   var(--app-accent);
    --pico-primary-hover-background:         var(--app-accent);
    --pico-primary-inverse:                  var(--app-accent-contrast);
    --pico-primary-focus:                    var(--app-accent);
    --pico-color:                            var(--app-text);
    --pico-h1-color:                         var(--app-text);
    --pico-h2-color:                         var(--app-text);
    --pico-h3-color:                         var(--app-text);
    --pico-h4-color:                         var(--app-text);
    --pico-h5-color:                         var(--app-text);
    --pico-h6-color:                         var(--app-text);
    --pico-muted-color:                      var(--app-muted);
    --pico-muted-border-color:               var(--app-border);
    --pico-border-radius:                    var(--app-radius);
    --pico-card-background-color:            var(--app-surface);
    --pico-card-sectioning-background-color: var(--app-surface-2);
    --pico-card-border-color:                var(--app-border);
    --pico-form-element-background-color:        var(--app-surface);
    --pico-form-element-active-background-color: var(--app-surface);
    --pico-form-element-selected-background-color: var(--app-surface-2);
    --pico-form-element-border-color:            var(--app-border);
    --pico-form-element-color:                   var(--app-text);
    --pico-form-element-placeholder-color:       var(--app-muted);
    --pico-dropdown-background-color:        var(--app-surface);
    --pico-dropdown-border-color:            var(--app-border);
    --pico-dropdown-color:                   var(--app-text);
    --pico-dropdown-hover-background-color:  var(--app-surface-2);
    --pico-code-background-color:            var(--app-surface-2);
    --pico-code-color:                       var(--app-text);
    --pico-table-border-color:               var(--app-border);
    --pico-secondary:                        var(--app-muted);
    --pico-secondary-border:                 var(--app-border);
    --pico-secondary-inverse:                var(--app-surface);
    --pico-font-family-sans-serif:           var(--app-font);
    --pico-font-family:                      var(--app-font);
    --pico-box-shadow:                       var(--app-shadow);
}

.cabinet-page .ui-icon {
    display: block;
    width: 1em;
    height: 1em;
    fill: none;
}

.cabinet-page .card {
    padding: var(--app-gap-l);
    background: var(--app-surface);
    border: 1px solid transparent;
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow);
}
.cabinet-page .card-hover {
    transition: transform .15s ease, box-shadow .15s ease;
}
.cabinet-page .card-hover:hover {
    transform: translateY(-2px);
    box-shadow: var(--app-shadow-lg);
}
.cabinet-page .grid-4,.cabinet-page .grid-3 {
    display: grid;
    gap: var(--app-gap-m);
    grid-template-columns: 1fr;
}
@media (min-width: 40rem) {
    .cabinet-page .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .cabinet-page .grid-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 64rem) {
    .cabinet-page .grid-4 { grid-template-columns: repeat(4, 1fr); }
}
.cabinet-page .section { margin-bottom: var(--app-gap-xl); }
.cabinet-page .section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--app-gap-s) var(--app-gap-m);
    margin-bottom: var(--app-gap-m);
}
.cabinet-page .section-head h2 { margin: 0; font-size: 1.15rem; }
.cabinet-page .section-more { font-size: .875rem; text-decoration: none; white-space: nowrap; }

.cabinet-page .stat {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    height: 100%;
}
.cabinet-page .stat-top { display: flex; align-items: center; gap: .5rem; min-height: 2.6rem; }
.cabinet-page .stat-emblem {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    font-size: 1.05rem;
    line-height: 1;
    background: var(--app-accent-soft);
    border-radius: .65rem;
}
.cabinet-page .stat-label { font-size: .9rem; line-height: 1.25; color: var(--app-muted); }
.cabinet-page .stat-value {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.cabinet-page .stat-unit { font-size: 1rem; font-weight: 400; color: var(--app-muted); }
.cabinet-page .stat-note { margin: 0; font-size: .85rem; color: var(--app-muted); }
.cabinet-page .stat-link {
    margin-top: auto;
    padding-top: .7rem;
    font-size: .875rem;
    text-decoration: none;
}

.cabinet-page .bar {
    overflow: hidden;
    height: .5rem;
    background: var(--app-surface-2);
    border-radius: 999px;
}
.cabinet-page .bar-fill {
    display: block;
    width: var(--p, 0%);
    height: 100%;
    background: var(--app-accent);
    border-radius: 999px;
    animation: bar-grow .6s ease-out both;
}
.cabinet-page .bar-ok   .bar-fill { background: var(--app-ok); }
.cabinet-page .bar-warn .bar-fill { background: var(--app-warn); }

@keyframes bar-grow {
    from { width: 0; }
    to   { width: var(--p, 0%); }
}

.cabinet-page .badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .15rem .55rem;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
    color: var(--app-muted);
    background: var(--app-surface-2);
    border: 1px solid transparent;
    border-radius: 999px;
}
.cabinet-page .badge-ok      { color: var(--app-ok);     background: var(--app-ok-soft); }
.cabinet-page .badge-warn    { color: var(--app-warn);   background: var(--app-warn-soft); }
.cabinet-page .badge-bad     { color: var(--app-bad);    background: var(--app-bad-soft); }
.cabinet-page .badge-accent  { color: var(--app-accent); background: var(--app-accent-soft); }

.cabinet-page .chip {
    display: inline-block;
    padding: .35rem .85rem;
    font-size: .875rem;
    color: var(--app-muted);
    text-decoration: none;
    background: var(--app-surface-2);
    border: 1px solid transparent;
    border-radius: 999px;
}
.cabinet-page .chip:hover { color: var(--app-text); }
.cabinet-page .chip-on {
    color: var(--app-accent-contrast);
    background: var(--app-accent);
}

.cabinet-page .trophy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    height: 100%;
    min-height: 11.25rem;
    margin-top: 3px;
    padding: var(--app-gap-m);
    text-align: center;
}
.cabinet-page .trophy-emblem {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 3.25rem;
    height: 3.25rem;
    font-size: 1.8rem;
    line-height: 1;
    background: var(--app-accent-soft);
    border-radius: 50%;
}
.cabinet-page .trophy-title {
    margin: 0;
    min-height: 2.4em;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cabinet-page .trophy-note {
    margin: 0;
    min-height: 1.15em;
    font-size: .78rem;
    color: var(--app-muted);
}
.cabinet-page .trophy-bar {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: .25rem;
    width: 100%;
    min-height: 2.35rem;
    margin-top: auto;
    padding-top: .5rem;
}
.cabinet-page .trophy-bar-slot {
    display: block;
    height: 2.35rem;
}
.cabinet-page .trophy-off .trophy-emblem { background: var(--app-surface-2); opacity: .8; }
.cabinet-page .trophy-off .trophy-title  { color: var(--app-muted); }
.cabinet-page .trophy[tabindex] { cursor: help; }
.cabinet-page .tip { display: none; }
.cabinet-page .tip:popover-open {
    display: block;
    position: fixed;
    inset: auto;
    max-width: min(20rem, calc(100vw - 2rem));
    margin: 0;
    padding: .5rem .7rem;
    color: var(--app-text);
    font-size: .8rem;
    line-height: 1.35;
    text-align: left;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow-lg);
}

.cabinet-page .quote {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    height: 100%;
    margin: 0;
    padding: var(--app-gap-l);
    background: var(--app-accent-soft);
    border-radius: var(--app-radius-lg);
}
.cabinet-page .quote-mark { font-size: 1.6rem; line-height: 1; color: var(--app-accent); opacity: .55; }
.cabinet-page .quote blockquote {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 1.05rem;
    line-height: 1.6;
}
.cabinet-page .quote figcaption { margin-top: auto; padding-top: .6rem; text-align: right;
                    font-size: .85rem; color: var(--app-muted); }

.cabinet-page .empty {
    padding: var(--app-gap-xl) var(--app-gap-l);
    text-align: center;
}
.cabinet-page .empty-emblem { display: block; margin-bottom: .6rem; font-size: 2.5rem; line-height: 1; }
.cabinet-page .empty h2 { margin: 0 0 .4rem; font-size: 1.1rem; }
.cabinet-page .empty p  { margin: 0 auto; max-width: 32rem; color: var(--app-muted); }
.cabinet-page .empty p + p { margin-top: .75rem; }
.cabinet-page > main:has(> .empty) {
    display: flex;
    align-items: center;
    justify-content: center;
}
.cabinet-page > main > .empty { width: min(36rem, 100%); }
.cabinet-page .empty a  { display: inline-block; margin-top: var(--app-gap-m); }

.cabinet-page .avatar {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1;
    color: var(--app-accent);
    background: var(--app-accent-soft);
    border-radius: 50%;
}

.cabinet-page .tone-ok     { color: var(--app-ok); }
.cabinet-page .tone-warn   { color: var(--app-warn); }
.cabinet-page .tone-bad    { color: var(--app-bad); }
.cabinet-page .tone-accent { color: var(--app-accent); }

@media (prefers-reduced-motion: reduce) {
    .cabinet-page .card-hover { transition: none; }
    .cabinet-page .card-hover:hover { transform: none; }
    .cabinet-page .bar-fill { animation: none; }
}

.cabinet-page main.container { padding-bottom: var(--app-gap-xl); }

.cabinet-page .hero {
    display: grid;
    gap: var(--app-gap-m);
    align-items: center;
    margin-bottom: var(--app-gap-l);
}
@media (min-width: 56rem) {
    .cabinet-page .hero { grid-template-columns: 1fr minmax(18rem, 22rem); }
}
.cabinet-page .hero h1 { margin: 0 0 .3rem; font-size: 1.75rem; line-height: 1.2; }
.cabinet-page .hero-text p { margin: 0; }
.cabinet-page .hero-exam {
    position: relative;
    overflow: hidden;
    display: none;
    flex-direction: column;
    gap: .15rem;
    padding: var(--app-gap-l);
    background:
        radial-gradient(14rem 10rem at 88% 20%, var(--app-accent-soft), transparent 70%),
        var(--app-surface);
    border: 1px solid transparent;
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow);
}
@media (min-width: 56rem) {
    .cabinet-page .hero-exam { display: flex; }
}
.cabinet-page .hero-exam-label { font-size: .9rem; color: var(--app-muted); }
.cabinet-page .hero-exam-days  { font-size: 2rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cabinet-page .hero-exam-date  { font-size: .9rem; color: var(--app-muted); }
.cabinet-page .hero-art {
    position: absolute;
    right: -.5rem;
    bottom: -.75rem;
    font-size: 4.5rem;
    line-height: 1;
    opacity: .18;
    pointer-events: none;
}

.cabinet-page .split { display: grid; gap: var(--app-gap-m); }
.cabinet-page .split > * { min-width: 0; }
@media (min-width: 64rem) {
    .cabinet-page .split { grid-template-columns: 1.6fr 1fr; align-items: stretch; }
}
.cabinet-page .strip {
    display: flex;
    align-items: stretch;
    gap: var(--app-gap-s);
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 10px;
    margin-bottom: -10px;
    scroll-snap-type: x proximity;
    scrollbar-gutter: auto;
    scrollbar-width: thin;
}
@supports (overflow: overlay) {
    .cabinet-page .strip { overflow-x: overlay; }
}
.cabinet-page .strip > * { flex: 0 0 8.5rem; scroll-snap-align: start; }
.cabinet-page .strip .card {
    background: var(--app-surface-3);
    border-color: var(--app-border);
    box-shadow: none;
}
.cabinet-page .trophies {
    display: grid;
    gap: var(--app-gap-m);
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    grid-auto-rows: 1fr;
    align-items: stretch;
}

.cabinet-page .trophy {
    min-height: 11.5rem;
}

.cabinet-page .strip .trophy {
    min-height: 11.5rem;
}

.cabinet-page .next h2 { margin: 0 0 var(--app-gap-m); font-size: 1.15rem; }
.cabinet-page .next-list { display: grid; gap: var(--app-gap-s); margin: 0; padding: 0; list-style: none; }
.cabinet-page .next-list li { display: flex; align-items: flex-start; gap: .6rem; }
.cabinet-page .next-emblem {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    font-size: .95rem;
    line-height: 1;
    background: var(--app-accent-soft);
    border-radius: 50%;
}
.cabinet-page .next-note { display: block; font-size: .85rem; color: var(--app-muted); }

@media (min-width: 56rem) {
    .cabinet-page .next-list { grid-template-columns: repeat(3, 1fr); }
}
.cabinet-page .chips { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .4rem; }
.cabinet-page .topic { padding: 0; margin-bottom: var(--app-gap-m); }
.cabinet-page .topic-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .9rem;
    padding: var(--app-gap-m) var(--app-gap-l);
    cursor: pointer;
}
.cabinet-page .topic-title   { flex: 1 1 12rem; font-weight: 600; }
.cabinet-page details.topic[open] > .topic-head { color: var(--app-text); }
.cabinet-page .topic-bar     { flex: 0 1 8rem; min-width: 5rem; }
.cabinet-page .topic-percent { flex: 0 0 auto; font-size: .9rem; color: var(--app-muted);
                 font-variant-numeric: tabular-nums; }
.cabinet-page .topic-counts  { flex: 0 0 auto; font-size: .85rem; color: var(--app-muted); }
.cabinet-page .topic-head > .badge { margin-left: auto; }
.cabinet-page .topic-head::after { margin-left: 0; }
@media (min-width: 64rem) {
    .cabinet-page .topic-head {
        display: grid;
        grid-template-columns: minmax(7rem, 1fr) 5.5rem 3rem 11rem 5.5rem 1rem;
        align-items: center;
    }
    .cabinet-page .topic-title   { grid-column: 1; }
    .cabinet-page .topic-bar     { grid-column: 2; min-width: 0; }
    .cabinet-page .topic-percent { grid-column: 3; text-align: right; }
    .cabinet-page .topic-counts  { grid-column: 4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .cabinet-page .topic-head > .badge {
        grid-column: 5;
        justify-self: end;
        margin-left: 0;
    }
    .cabinet-page .topic-head::after {
        grid-column: 6;
        justify-self: end;
        float: none;
        margin: 0;
    }
}

@supports (interpolate-size: allow-keywords) {
    .cabinet-page { interpolate-size: allow-keywords; }
    .cabinet-page .topic::details-content {
        overflow: hidden;
        block-size: 0;
        transition: block-size .25s ease, content-visibility .25s allow-discrete;
    }
    .cabinet-page .topic[open]::details-content { block-size: auto; }
}

.cabinet-page .topic-body {
    display: grid;
    gap: var(--app-gap-l);
    padding: 0 var(--app-gap-l) var(--app-gap-l);
    border-top: 1px solid var(--app-border);
    padding-top: var(--app-gap-m);
}
@media (min-width: 56rem) {
    .cabinet-page .topic-body { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
    .cabinet-page .topic-cheer { grid-column: 1 / -1; }
}
.cabinet-page .topic-col h3 { margin: 0 0 .5rem; font-size: .95rem; color: var(--app-muted); }

.cabinet-page .items { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.cabinet-page .item  { display: flex; align-items: flex-start; gap: .5rem; }
.cabinet-page .item-body { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; min-width: 0; }
.cabinet-page .item-note { font-size: .85rem; color: var(--app-muted); }
.cabinet-page .item-mark {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 1.4rem;
    height: 1.4rem;
    font-size: .8rem;
    line-height: 1;
    color: var(--app-muted);
    background: var(--app-surface-2);
    border-radius: 50%;
}
.cabinet-page .item-mark-on { color: var(--app-ok); background: var(--app-ok-soft); }

.cabinet-page .tries { font-size: .85rem; flex-basis: 100%; }
.cabinet-page .tries summary { cursor: pointer; color: var(--app-muted); }
.cabinet-page .tries ul { margin: .3rem 0 0; padding-left: 1.2rem; }
.cabinet-page .tries li { margin: .2rem 0; }

.cabinet-page .topic-cheer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--app-gap-m);
    padding: var(--app-gap-m);
    background: var(--app-accent-soft);
    border-radius: var(--app-radius);
}
.cabinet-page .topic-cheer p { margin: 0; }
.cabinet-page .topic-cheer a { margin: 0; width: auto; }
.cabinet-page .sections { display: grid; gap: .6rem; }
.cabinet-page .section-row {
    display: grid;
    grid-template-columns: minmax(6rem, 10rem) 1fr auto;
    gap: .8rem;
    align-items: center;
}
.cabinet-page .section-name  { font-size: .9rem; }
.cabinet-page .section-score { font-size: .9rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cabinet-page .chart-box { margin: 1.2rem 0 0; }
.cabinet-page .item-actions {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
}
.cabinet-page .item-actions form { margin: 0; }
.cabinet-page .item-actions button { margin: 0; padding: .25rem .6rem; font-size: .85rem; }

.cabinet-page .stack { display: grid; gap: .75rem; }
.cabinet-page .stack button { margin: 0; justify-self: start; }
.cabinet-page .data-notice-fold {
    margin: 1rem 0 0;
}
.cabinet-page .data-notice-fold > summary {
    display: inline-block;
    width: auto;
    margin: 0;
    padding: .2rem .65rem;
    font-size: .82rem;
    line-height: 1.3;
    color: var(--app-text);
    background: transparent;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    cursor: pointer;
    list-style: none;
}
.cabinet-page .data-notice-fold > summary::-webkit-details-marker { display: none; }
.cabinet-page .data-notice-fold > summary:hover {
    background: var(--app-surface-2);
}
.cabinet-page .data-notice-fold[open] > summary { margin-bottom: .6rem; }
.cabinet-page .data-notice { display: grid; gap: .35rem; margin: 0; }
.cabinet-page .data-notice dt { font-weight: 600; }
.cabinet-page .data-notice dd { margin: 0 0 .25rem; }

.cabinet-page .link-code { display: grid; gap: .5rem; }
.cabinet-page .link-code .code {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 1.75rem;
    letter-spacing: .25em;
    user-select: all;
}
.cabinet-page .link-code ol { margin: 0; padding-left: 1.25rem; display: grid; gap: .25rem; }
.cabinet-page .link-code-qr-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .4rem;
}
.cabinet-page .link-code-qr-actions button {
    margin: 0;
    width: auto;
    min-height: 0;
    height: auto;
    padding: .2rem .65rem;
    font-size: .82rem;
    line-height: 1.3;
}
.cabinet-page .link-code-qr {
    display: grid;
    gap: .5rem;
    justify-items: start;
}
.cabinet-page .link-code-qr img {
    display: block;
    width: 12.5rem;
    height: 12.5rem;
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
}
.cabinet-page #cabinet-panel { view-transition-name: cabinet-panel; }

.cabinet-page ::view-transition-group(root) { animation: none; }
.cabinet-page ::view-transition-old(cabinet-panel),.cabinet-page ::view-transition-new(cabinet-panel) {
    height: auto;
    mix-blend-mode: normal;
}

.cabinet-page ::view-transition-old(cabinet-panel) {
    animation: panel-out 160ms cubic-bezier(.22, .61, .36, 1) both;
}
.cabinet-page ::view-transition-new(cabinet-panel) {
    animation: panel-in 260ms cubic-bezier(.22, .61, .36, 1) both;
}
.cabinet-page.panel-quiet::view-transition-old(cabinet-panel) { animation-duration: 90ms; }
.cabinet-page.panel-quiet::view-transition-new(cabinet-panel) { animation-duration: 120ms; }

@keyframes panel-out { to { opacity: 0; } }
@keyframes panel-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .cabinet-page ::view-transition-old(cabinet-panel),.cabinet-page ::view-transition-new(cabinet-panel) { animation: none; }
}

.cabinet-page {
    --cabinet-display: "Golos Text", "Onest", var(--app-font);
    font-family: "Onest", var(--app-font);
    letter-spacing: 0;
}

.cabinet-page main.container {
    padding-top: clamp(.6rem, 1.6vw, 1.2rem);
}

.cabinet-page .app-header {
    --header-tab-gap: .55rem;
    padding: 0;
    margin-bottom: 0;
    color: var(--app-header-text);
    background: color-mix(in srgb, var(--app-bg) 55%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--app-text) 16%, transparent);
    box-shadow:
        0 1px 0 color-mix(in srgb, #fff 45%, transparent),
        0 .7rem 1.5rem rgb(45 41 57 / 9%);
    backdrop-filter: blur(16px) saturate(1.12);
    -webkit-backdrop-filter: blur(16px) saturate(1.12);
}

.cabinet-page .app-header > .container {
    filter: none;
}

.cabinet-page .app-header-inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(8rem, auto) minmax(0, 1fr) auto;
    grid-template-rows: 1fr;
    gap: .35rem;
    align-items: stretch;
    min-height: 3.55rem;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.cabinet-page .app-header-inner::after { content: none; }

.cabinet-page .course-switch,.cabinet-page .app-header .brand {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    width: auto;
    max-width: 18rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border-right: 0;
}

.cabinet-page .course-switch::before,.cabinet-page .app-header .brand::before { content: none; }

.cabinet-page details.course-switch > summary:not([role]),.cabinet-page .app-header .brand {
    display: flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    height: 100%;
    min-height: 3.55rem;
    margin: 0;
    padding: 0 1.35rem 0 0;
    font-family: var(--cabinet-display);
    font-size: 1rem;
    font-weight: 680;
    line-height: 1.2;
    letter-spacing: -.015em;
    color: var(--app-text);
    text-decoration: none;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.cabinet-page details.course-switch > summary:not([role]) {
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cabinet-page details.course-switch > summary::after {
    position: absolute;
    right: 0;
    top: 50%;
    margin: calc(-.5rem * var(--pico-line-height, 1.5)) 0 0;
    float: none;
}

/* Выбор курса – та же панель, что у меню справа, а не нативный select Pico.
   Кнопка остаётся названием курса. Список не залезает под неё. */
.cabinet-page .course-switch { position: relative; }
.cabinet-page .course-switch-btn {
    position: relative;
    display: flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    height: 100%;
    min-height: 3.55rem;
    margin: 0;
    padding: 0 1.35rem 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-family: var(--cabinet-display);
    font-size: 1rem;
    font-weight: 680;
    line-height: 1.2;
    letter-spacing: -.015em;
    color: var(--app-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}
.cabinet-page .course-switch-btn::after {
    content: "";
    position: absolute;
    right: .15rem;
    top: 50%;
    width: .4rem;
    height: .4rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-70%) rotate(45deg);
}
.cabinet-page .course-switch-btn[aria-expanded="true"]::after {
    transform: translateY(-30%) rotate(-135deg);
}
.cabinet-page .course-switch-panel {
    left: 0;
    right: auto;
    width: max-content;
    min-width: 12.5rem;
    max-width: min(22rem, calc(100vw - 2rem));
}
.cabinet-page .course-switch-panel .app-menu-item[aria-current="page"] {
    background: color-mix(in srgb, var(--app-accent) 16%, transparent);
}

.cabinet-page .app-header-nav {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    width: auto;
    height: 100%;
    margin: 0;
    padding: var(--header-tab-gap) 0 0;
    gap: .12rem;
    justify-content: center;
    align-items: stretch;
    overflow-x: auto;
    scrollbar-width: none;
    border-right: 0;
    box-shadow: none;
}

.cabinet-page .app-header-nav::-webkit-scrollbar { display: none; }

.cabinet-page .tab {
    --mx: 50%;
    --tab-bg: transparent;
    --tab-flare: .48rem;
    position: relative;
    z-index: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 .9rem var(--header-tab-gap);
    margin-bottom: 0;
    box-sizing: border-box;
    font-size: .9rem;
    font-weight: 620;
    letter-spacing: 0;
    color: var(--app-muted);
    text-decoration: none;
    white-space: nowrap;
    background: transparent;
    border: 0;
    border-bottom: 0;
    border-radius: .6rem .6rem 0 0;
    transition: color 150ms ease, background-color 150ms ease;
}

.cabinet-page .tab::before,.cabinet-page .tab::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: var(--tab-flare);
    height: var(--tab-flare);
    pointer-events: none;
    opacity: 0;
    background: transparent;
    transition: opacity 150ms ease;
}
.cabinet-page .tab::before {
    left: calc(var(--tab-flare) * -1);
    border-bottom-right-radius: var(--tab-flare);
    box-shadow: .15rem .15rem 0 0 var(--tab-bg);
}

.cabinet-page .tab::after {
    right: calc(var(--tab-flare) * -1);
    left: auto;
    border-bottom-left-radius: var(--tab-flare);
    box-shadow: -.15rem .15rem 0 0 var(--tab-bg);
    transform: none;
}

.cabinet-page .tab .tab-ink {
    position: absolute;
    left: var(--mx);
    bottom: 0;
    width: 42%;
    height: 2px;
    border-radius: 0;
    background: var(--app-accent);
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform 160ms ease, left 120ms ease, width 160ms ease;
    pointer-events: none;
}

.cabinet-page .tab:hover {
    --tab-bg: color-mix(in srgb, var(--app-accent-soft) 70%, #fff);
    color: var(--app-text);
    background: var(--tab-bg);
}

.cabinet-page .tab:hover::before,.cabinet-page .tab:hover::after,.cabinet-page .tab-on::before,.cabinet-page .tab-on::after { opacity: 1; }

.cabinet-page .tab:hover .tab-ink { transform: translateX(-50%) scaleX(1); }

.cabinet-page .tab-on {
    --tab-bg: color-mix(in srgb, var(--app-accent-soft) 88%, #fff);
    z-index: 1;
    padding-top: .22rem;
    color: var(--app-accent);
    background: var(--tab-bg);
    border-bottom-color: transparent;
    box-shadow: 0 1px 0 var(--tab-bg);
}

.cabinet-page .tab-on .tab-ink,.cabinet-page .tab-on:hover .tab-ink {
    left: 0;
    width: 100%;
    transform: none;
    border-radius: 0;
}

.cabinet-page .app-menu {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.cabinet-page .app-menu-name { display: none; }
.cabinet-page details.app-menu > summary:not([role]) {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: auto;
    height: 100%;
    min-height: 3.55rem;
    max-height: none;
    max-width: none;
    margin: 0;
    padding: 0;
    color: var(--app-text);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.cabinet-page details.app-menu > summary:not([role])::after { display: none; }
.cabinet-page details.app-menu > summary:not([role])::before {
    content: none;
}

.cabinet-page details.app-menu[open] > summary:not([role])::before {
    content: "";
}

.cabinet-page .avatar {
    flex: 0 0 1.85rem;
    width: 1.85rem !important;
    height: 1.85rem !important;
    min-width: 1.85rem;
    max-width: 1.85rem;
    aspect-ratio: 1 / 1;
    color: var(--app-accent-contrast);
    background: var(--app-accent);
    border-radius: 50%;
    box-shadow: 0 .25rem .55rem color-mix(in srgb, var(--app-accent) 32%, transparent);
}

.cabinet-page .hero {
    gap: clamp(1.2rem, 3vw, 2.4rem);
    margin: clamp(.75rem, 1.8vw, 1.35rem) 0 clamp(1.2rem, 2.6vw, 1.9rem);
}

.cabinet-page .hero-kicker {
    display: block;
    margin-bottom: .4rem;
    font-size: .6rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cabinet-signal, var(--app-accent));
}

.cabinet-page .hero h1 {
    max-width: 18ch;
    margin: 0 0 .35rem;
    font-family: var(--cabinet-display);
    font-size: clamp(1.28rem, 2.1vw, 1.68rem);
    font-weight: 650;
    line-height: 1.15;
    letter-spacing: -.02em;
}

.cabinet-page .hero-text p {
    max-width: 46rem;
    font-size: .9rem;
    line-height: 1.5;
    color: var(--app-muted);
}

.cabinet-page .hero-exam {
    min-height: 10.5rem;
    justify-content: flex-end;
    padding: 1.2rem 1.35rem;
    color: var(--app-accent-contrast);
    background:
        radial-gradient(10rem 8rem at 100% 0, color-mix(in srgb, var(--cabinet-signal) 55%, transparent), transparent 72%),
        linear-gradient(145deg, #65618f, var(--app-accent));
    border: 1px solid color-mix(in srgb, var(--app-accent) 72%, #24232b);
    border-radius: 1rem .2rem 1rem 1rem;
    box-shadow: 0 1rem 2.1rem rgb(45 41 57 / 22%);
    clip-path: none;
}

.cabinet-page .hero-exam-label,.cabinet-page .hero-exam-date { color: currentColor; opacity: .72; }

.cabinet-page .hero-exam-days {
    position: relative;
    z-index: 1;
    max-width: 9ch;
    font-family: var(--cabinet-display);
    font-size: clamp(1.4rem, 2.3vw, 1.9rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.03em;
}

.cabinet-page .hero-art {
    display: grid;
    place-items: center;
    right: .8rem;
    top: .8rem;
    bottom: auto;
    width: 3.2rem;
    height: 3.2rem;
    font-size: 1.8rem;
    color: var(--app-accent);
    background: var(--cabinet-signal-soft, var(--app-accent-soft));
    border-radius: .7rem .15rem .7rem .7rem;
    opacity: .95;
}

.cabinet-page .grid-4.section,.cabinet-page .grid-3.section {
    border: 0;
}

.cabinet-page .dashboard-stats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: minmax(9.2rem, auto);
    gap: .28rem;
    margin-bottom: clamp(1.35rem, 2.8vw, 2.1rem);
    padding: 0;
    border: 0;
    filter: drop-shadow(0 .45rem 1.25rem var(--app-shadow-color));
}

.cabinet-page .dashboard-stats .stat {
    gap: .4rem;
    min-width: 0;
    margin: 0;
    padding: 1rem 1.1rem;
    background: var(--app-surface);
    border: 1px solid color-mix(in srgb, var(--app-border) 88%, transparent);
    box-shadow: none;
}

.cabinet-page .dashboard-stats .stat:nth-child(1) {
    grid-column: 1 / 5;
    border-radius: 1rem .2rem 1rem 1rem;
}

.cabinet-page .dashboard-stats .stat:nth-child(2) {
    grid-column: 5 / 7;
    border-radius: .2rem 1rem 1rem .65rem;
}

.cabinet-page .dashboard-stats .stat:nth-child(3) {
    grid-column: 1 / 3;
    border-radius: 1rem .65rem .2rem 1rem;
}

.cabinet-page .dashboard-stats .stat:nth-child(4) {
    grid-column: 3 / 7;
    border-radius: .2rem 1rem 1rem 1rem;
}
.cabinet-page .dashboard-stats.grid-3 .stat:nth-child(1) { grid-column: 1 / 3; }
.cabinet-page .dashboard-stats.grid-3 .stat:nth-child(2) { grid-column: 3 / 5; }
.cabinet-page .dashboard-stats.grid-3 .stat:nth-child(3) { grid-column: 5 / 7; }

.cabinet-page .dashboard-stats .stat-top {
    min-height: 1.8rem;
    gap: .55rem;
}

.cabinet-page .dashboard-stats .stat-emblem {
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
    color: var(--app-accent);
    background: var(--app-accent-soft);
    border: 0;
    border-radius: .55rem .12rem .55rem .55rem;
}

.cabinet-page .dashboard-stats .stat:nth-child(2) .stat-emblem,.cabinet-page .dashboard-stats .stat:nth-child(3) .stat-emblem {
    color: var(--cabinet-signal, var(--app-accent));
    background: var(--cabinet-signal-soft, var(--app-accent-soft));
}

.cabinet-page .dashboard-stats .stat-label {
    font-size: .7rem;
    font-weight: 650;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.cabinet-page .dashboard-stats .stat-value {
    font-family: var(--cabinet-display);
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    font-weight: 680;
    letter-spacing: -.025em;
}

.cabinet-page .dashboard-stats .stat-unit {
    font-family: "Onest", var(--app-font);
    font-size: .8rem;
    letter-spacing: 0;
}

.cabinet-page .dashboard-stats .stat-link {
    width: fit-content;
    margin-top: auto;
    padding-top: .5rem;
    color: var(--app-text);
    border-bottom: 1px solid color-mix(in srgb, var(--app-text) 30%, transparent);
    transition: color 150ms ease, border-color 150ms ease;
}

.cabinet-page .dashboard-stats .stat-link span {
    display: inline-block;
    transition: transform 150ms ease;
}

.cabinet-page .dashboard-stats .stat-link:hover {
    color: var(--app-accent);
    border-color: var(--app-accent);
}

.cabinet-page .dashboard-stats .stat-link:hover span { transform: translateX(.18rem); }

.cabinet-page .dashboard-stats .stat.card-hover {
    transition: transform 150ms ease, background-color 150ms ease;
}
.cabinet-page .dashboard-stats .stat.card-hover:hover {
    transform: translateY(-2px);
    background: color-mix(in srgb, var(--app-surface) 88%, var(--app-accent-soft));
}

.cabinet-page .section { margin-bottom: clamp(1.5rem, 3vw, 2.6rem); }

.cabinet-page .card {
    border-color: var(--app-border);
    border-radius: .85rem .2rem .85rem .85rem;
    box-shadow: 0 .55rem 1.45rem var(--app-shadow-color);
}

.cabinet-page .card-hover:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--app-accent) 45%, var(--app-border));
    box-shadow: 0 .9rem 2rem var(--app-shadow-color);
}

.cabinet-page .awards-box {
    padding: 1.2rem;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 1rem .2rem 1rem 1rem;
    box-shadow: 0 .7rem 1.8rem var(--app-shadow-color);
}

.cabinet-page .section-head h1,.cabinet-page .section-head h2,.cabinet-page .next h2 {
    font-family: var(--cabinet-display);
    font-weight: 700;
    letter-spacing: -.02em;
}

.cabinet-page .strip { gap: 0; }
.cabinet-page .strip > * { flex-basis: 9.2rem; }

.cabinet-page .strip .card {
    margin-top: 0;
    background: transparent;
    border: 0;
    border-right: 1px solid var(--app-border);
    border-radius: 0;
    box-shadow: none;
}

.cabinet-page .strip .card:last-child { border-right: 0; }

.cabinet-page .quote {
    position: relative;
    justify-content: center;
    min-height: 14rem;
    padding: clamp(1.2rem, 2.5vw, 2rem);
    color: var(--app-text);
    background:
        linear-gradient(155deg, var(--cabinet-signal-soft, var(--app-accent-soft)), var(--app-surface));
    border: 1px solid color-mix(in srgb, var(--cabinet-signal) 36%, var(--app-border));
    border-radius: .2rem 1rem 1rem 1rem;
    box-shadow: 0 .55rem 1.5rem var(--app-shadow-color);
    clip-path: none;
}

.cabinet-page .quote-mark {
    font-family: var(--cabinet-display);
    font-size: 2.8rem;
    color: var(--cabinet-signal, var(--app-accent));
    opacity: .7;
}

.cabinet-page .quote blockquote {
    font-family: var(--cabinet-display);
    font-size: clamp(1.05rem, 1.8vw, 1.3rem);
    font-weight: 520;
    line-height: 1.45;
}

.cabinet-page .quote figcaption { color: var(--app-muted); opacity: 1; }

.cabinet-page .next {
    padding-left: clamp(1.1rem, 2.5vw, 1.8rem);
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-left: .28rem solid var(--cabinet-signal, var(--app-accent));
    border-radius: .2rem 1rem 1rem .2rem;
    box-shadow: 0 .45rem 1.3rem var(--app-shadow-color);
}

.cabinet-page .next-emblem {
    width: 1.9rem;
    height: 1.9rem;
    font-size: 1rem;
    color: var(--app-accent);
    background: transparent;
    border: 1px solid currentColor;
}

.cabinet-page #cabinet-panel > * {
    animation: cabinet-enter 380ms cubic-bezier(.22, .61, .36, 1) both;
}

.cabinet-page #cabinet-panel > :nth-child(2) { animation-delay: 45ms; }
.cabinet-page #cabinet-panel > :nth-child(3) { animation-delay: 85ms; }
.cabinet-page #cabinet-panel > :nth-child(4) { animation-delay: 120ms; }

@keyframes cabinet-enter {
    from { opacity: 0; transform: translateY(.35rem); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 61rem) {
    .cabinet-page .app-header-inner {
        grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
        gap: .25rem;
    }
    .cabinet-page .course-switch,.cabinet-page .app-header .brand {
        width: auto;
        max-width: 11rem;
        min-width: 0;
        padding-right: 0;
    }
    .cabinet-page details.course-switch > summary:not([role]),
    .cabinet-page .course-switch-btn,
    .cabinet-page .app-header .brand {
        padding-right: 1.3rem;
        gap: 0;
        min-width: 0;
    }
    .cabinet-page .tab { padding-inline: .55rem; }
    .cabinet-page .app-menu { padding-left: 0; min-width: 0; }
}

@media (max-width: 48rem) {
    .cabinet-page .app-header-inner {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        gap: 0;
    }
    .cabinet-page .course-switch,.cabinet-page .app-header .brand {
        grid-column: 1;
        grid-row: 1;
        width: auto;
        max-width: none;
        min-width: 0;
        border-right: 0;
        padding-right: 0;
    }
    .cabinet-page details.course-switch > summary:not([role]),
    .cabinet-page .course-switch-btn {
        align-items: center;
        padding-right: 1.3rem;
    }
    .cabinet-page details.course-switch > summary::after {
        right: 0;
    }
    .cabinet-page .app-menu {
        grid-column: 2;
        grid-row: 1;
        padding-left: 0;
        border-left: 0;
    }
    .cabinet-page .app-header-nav {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: flex-start;
        align-items: stretch;
        border-right: 0;
        border-top: 1px solid color-mix(in srgb, var(--app-text) 12%, transparent);
        padding: .25rem 0 0;
        margin-top: .1rem;
        min-height: 2.4rem;
    }
    .cabinet-page .hero h1 { max-width: none; }
    .cabinet-page .dashboard-stats {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: .5rem;
    }
    .cabinet-page .dashboard-stats .stat:nth-child(n),.cabinet-page .dashboard-stats.grid-3 .stat:nth-child(n),.cabinet-page .dashboard-stats.grid-4 .stat:nth-child(n) {
        grid-column: 1 / -1;
        margin: 0;
        border-radius: .75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cabinet-page #cabinet-panel > * { animation: none; }
    .cabinet-page .tab,.cabinet-page .tab::before,.cabinet-page .tab::after,.cabinet-page .tab .tab-ink,.cabinet-page .dashboard-stats .stat-link,.cabinet-page .dashboard-stats .stat-link span { transition: none; }
}


.cabinet-page { --app-font:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; --app-radius:.6rem; --app-radius-lg:1rem; --app-gap-s:.6rem; --app-gap-m:1rem; --app-gap-l:1.5rem; --app-gap-xl:2.5rem; --app-shadow-color:var(--app-shadow);  --app-shadow-lg:0 6px 14px var(--app-shadow-color),0 16px 36px var(--app-shadow-color); --cabinet-signal:var(--app-signal); --cabinet-signal-soft:var(--app-signal-soft); --app-header-text:var(--app-text); font:1rem/1.5 Onest,system-ui,sans-serif; }
.cabinet-page .page-card {
    max-width: 26rem;
    margin: clamp(1.8rem, 7vw, 3.6rem) auto;
    padding: clamp(1.35rem, 3vw, 1.85rem);
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: .85rem .2rem .85rem .85rem;
    box-shadow: 0 .7rem 1.8rem var(--app-shadow-color);
}
.cabinet-page .page-card h1 {
    margin: 0 0 .75rem;
    font-family: var(--cabinet-display);
    font-size: clamp(1.55rem, 3.2vw, 1.9rem);
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.15;
    color: var(--app-text);
}
.cabinet-page .page-card > p { color: var(--app-muted); line-height: 1.5; }
.cabinet-page .page-card code {
    display: inline-block;
    padding: .15rem .45rem;
    color: var(--app-text);
    background: var(--app-surface-2);
    border-radius: .35rem;
    font-size: .92em;
}
.cabinet-page .page-card form {
    display: grid;
    gap: .85rem;
    margin-top: .35rem;
}
.cabinet-page .page-card label {
    margin: 0;
    font-weight: 550;
    color: var(--app-text);
}
.cabinet-page .page-card input[type="text"],
.cabinet-page .page-card input[type="password"] {
    margin-top: .35rem;
    border-radius: .55rem .15rem .55rem .55rem;
    border-color: var(--app-border);
    background: var(--app-surface-3);
}
.cabinet-page .page-card .error-text {
    margin: 0 0 .4rem;
    padding: .55rem .7rem;
    border-radius: .45rem;
    background: var(--app-bad-soft);
    color: var(--app-bad);
}
.cabinet-page .page-card button,
.cabinet-page .page-card a[role="button"] {
    display: inline-block;
    width: auto;
    margin: .25rem 0 0;
    padding: .75rem 1rem;
    border: 0;
    border-radius: .55rem .15rem .55rem .55rem;
    background: var(--app-accent);
    color: var(--app-accent-contrast);
    font: inherit;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    box-shadow: 0 .45rem 1rem color-mix(in srgb, var(--app-accent) 35%, transparent);
}
.cabinet-page .container {
    padding-inline: var(--app-gap-m);
}@media (min-width: 48rem){.cabinet-page .container { padding-inline: var(--app-gap-xl); }}.cabinet-page details.course-switch > summary + ul {
    width: max-content;
    min-width: 100%;
    max-width: min(22rem, calc(100vw - 2rem));
}.cabinet-page details.course-switch > summary + ul li { list-style: none; }.cabinet-page .muted        { color: var(--app-muted); }.cabinet-page .small        { font-size: .85em; }.cabinet-page .table-wrap {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}.cabinet-page .table-wrap::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* Заголовок сортируемой колонки – кнопка, но выглядит как текст заголовка. */
.cabinet-page th .sort-head,
.cabinet-page th .sort-head:is(:hover, :active, :focus) {
    display: inline-flex;
    align-items: baseline;
    gap: .3em;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: inherit;
    font: inherit;
    text-align: inherit;
    white-space: nowrap;
    cursor: pointer;
}
.cabinet-page th .sort-head:focus-visible {
    outline: var(--pico-outline-width) solid var(--pico-primary-focus);
    outline-offset: .15rem;
    border-radius: var(--pico-border-radius);
}
.cabinet-page th .sort-mark { font-size: .85em; }
.cabinet-page .app-header { position:sticky;top:0;z-index:10; }
.cabinet-page .tone-ok{color:var(--app-ok)} .cabinet-page .tone-bad{color:var(--app-bad)} .cabinet-page .tone-warn{color:var(--app-warn)}

/* Фон body из Pico попал на .cabinet-page и закрыл подложку: рисунок полей
   и лист лежат под страницей, с отрицательным z-index. */
.cabinet-page,
.cabinet-page:not([data-theme]),
.cabinet-page[data-theme] {
    background-color: transparent;
    background-image: none;
}
.cabinet-page > main { flex: 1 0 auto; }

.cabinet-page .app-footer {
    padding: .9rem 0;
    margin-top: 1.6rem;
    font-size: .82rem;
    color: var(--app-muted);
}
.cabinet-page .app-footer a { color: inherit; text-decoration-color: color-mix(in srgb, var(--app-muted) 50%, transparent); }

/* Кнопка меню – не кнопка Pico: прозрачная, вровень с полосой шапки. */
.cabinet-page .app-menu [role="button"] {
    width: auto;
    min-height: 3.55rem;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: inherit;
}
.cabinet-page .app-menu [role="button"]:is(:hover, :active, :focus) {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: inherit;
}

/* Ссылки меню – пункты списка, а не синие подчёркнутые ссылки Pico.
   Фон пункта на всю ширину панели, с одним и тем же отступом. */
.cabinet-page .app-menu [role="link"],
.cabinet-page .app-menu [role="menuitem"],
.cabinet-page .app-menu-panel .app-menu-item {
    display: block;
    width: 100%;
    margin: 0;
    padding: .45rem 1rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    background-color: transparent;
    color: var(--app-text);
    text-align: left;
    text-decoration: none;
    box-shadow: none;
    outline: none;
}
.cabinet-page .app-menu [role="link"]:is(:hover, :focus, :focus-visible),
.cabinet-page .app-menu [role="menuitem"]:is(:hover, :focus, :focus-visible),
.cabinet-page .app-menu-panel .app-menu-item:is(:hover, :focus, :focus-visible) {
    background: var(--app-surface-2);
    background-color: var(--app-surface-2);
    border: 0;
    color: var(--app-text);
    text-align: left;
    text-decoration: none;
    box-shadow: none;
    outline: none;
}

/* Pico, base и ui прежней страницы. :where не поднимает специфичность. */
@charset "UTF-8";/*!
 * Pico CSS ✨ v2.0.6 (https://picocss.com)
 * Copyright 2019-2024 - Licensed under MIT
 */:root{--pico-font-family-emoji:"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--pico-font-family-sans-serif:system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif,var(--pico-font-family-emoji);--pico-font-family-monospace:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace,var(--pico-font-family-emoji);--pico-font-family:var(--pico-font-family-sans-serif);--pico-line-height:1.5;--pico-font-weight:400;--pico-font-size:100%;--pico-text-underline-offset:0.1rem;--pico-border-radius:0.25rem;--pico-border-width:0.0625rem;--pico-outline-width:0.125rem;--pico-transition:0.2s ease-in-out;--pico-spacing:1rem;--pico-typography-spacing-vertical:1rem;--pico-block-spacing-vertical:var(--pico-spacing);--pico-block-spacing-horizontal:var(--pico-spacing);--pico-grid-column-gap:var(--pico-spacing);--pico-grid-row-gap:var(--pico-spacing);--pico-form-element-spacing-vertical:0.75rem;--pico-form-element-spacing-horizontal:1rem;--pico-group-box-shadow:0 0 0 rgba(0, 0, 0, 0);--pico-group-box-shadow-focus-with-button:0 0 0 var(--pico-outline-width) var(--pico-primary-focus);--pico-group-box-shadow-focus-with-input:0 0 0 0.0625rem var(--pico-form-element-border-color);--pico-modal-overlay-backdrop-filter:blur(0.375rem);--pico-nav-element-spacing-vertical:1rem;--pico-nav-element-spacing-horizontal:0.5rem;--pico-nav-link-spacing-vertical:0.5rem;--pico-nav-link-spacing-horizontal:0.5rem;--pico-nav-breadcrumb-divider:">";--pico-icon-checkbox:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--pico-icon-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");--pico-icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--pico-icon-date:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");--pico-icon-time:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");--pico-icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");--pico-icon-close:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");--pico-icon-loading:url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='rgb(136, 145, 164)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E")}@media (min-width:576px){.test-page{--pico-font-size:106.25%}}@media (min-width:768px){.test-page{--pico-font-size:112.5%}}@media (min-width:1024px){.test-page{--pico-font-size:118.75%}}@media (min-width:1280px){.test-page{--pico-font-size:125%}}@media (min-width:1536px){.test-page{--pico-font-size:131.25%}}:where(.test-page) a{--pico-text-decoration:underline}:where(.test-page) a.contrast, :where(.test-page) a.secondary{--pico-text-decoration:underline}:where(.test-page) small{--pico-font-size:0.875em}:where(.test-page) h1, :where(.test-page) h2, :where(.test-page) h3, :where(.test-page) h4, :where(.test-page) h5, :where(.test-page) h6{--pico-font-weight:700}:where(.test-page) h1{--pico-font-size:2rem;--pico-line-height:1.125;--pico-typography-spacing-top:3rem}:where(.test-page) h2{--pico-font-size:1.75rem;--pico-line-height:1.15;--pico-typography-spacing-top:2.625rem}:where(.test-page) h3{--pico-font-size:1.5rem;--pico-line-height:1.175;--pico-typography-spacing-top:2.25rem}:where(.test-page) h4{--pico-font-size:1.25rem;--pico-line-height:1.2;--pico-typography-spacing-top:1.874rem}:where(.test-page) h5{--pico-font-size:1.125rem;--pico-line-height:1.225;--pico-typography-spacing-top:1.6875rem}:where(.test-page) h6{--pico-font-size:1rem;--pico-line-height:1.25;--pico-typography-spacing-top:1.5rem}:where(.test-page) tfoot td, :where(.test-page) tfoot th, :where(.test-page) thead td, :where(.test-page) thead th{--pico-font-weight:600;--pico-border-width:0.1875rem}:where(.test-page) code, :where(.test-page) kbd, :where(.test-page) pre, :where(.test-page) samp{--pico-font-family:var(--pico-font-family-monospace)}:where(.test-page) kbd{--pico-font-weight:bolder}:where(.test-page) :where(select,textarea), :where(.test-page) input:not([type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[type=file]){--pico-outline-width:0.0625rem}:where(.test-page) [type=search]{--pico-border-radius:5rem}:where(.test-page) [type=checkbox], :where(.test-page) [type=radio]{--pico-border-width:0.125rem}:where(.test-page) [type=checkbox][role=switch]{--pico-border-width:0.1875rem}:where(.test-page) details.dropdown summary:not([role=button]){--pico-outline-width:0.0625rem}:where(.test-page) nav details.dropdown summary:focus-visible{--pico-outline-width:0.125rem}:where(.test-page) [role=search]{--pico-border-radius:5rem}:where(.test-page) [role=group]:has(button.secondary:focus,[type=submit].secondary:focus,[type=button].secondary:focus,[role=button].secondary:focus), :where(.test-page) [role=search]:has(button.secondary:focus,[type=submit].secondary:focus,[type=button].secondary:focus,[role=button].secondary:focus){--pico-group-box-shadow-focus-with-button:0 0 0 var(--pico-outline-width) var(--pico-secondary-focus)}:where(.test-page) [role=group]:has(button.contrast:focus,[type=submit].contrast:focus,[type=button].contrast:focus,[role=button].contrast:focus), :where(.test-page) [role=search]:has(button.contrast:focus,[type=submit].contrast:focus,[type=button].contrast:focus,[role=button].contrast:focus){--pico-group-box-shadow-focus-with-button:0 0 0 var(--pico-outline-width) var(--pico-contrast-focus)}:where(.test-page) [role=group] [role=button], :where(.test-page) [role=group] [type=button], :where(.test-page) [role=group] [type=submit], :where(.test-page) [role=group] button, :where(.test-page) [role=search] [role=button], :where(.test-page) [role=search] [type=button], :where(.test-page) [role=search] [type=submit], :where(.test-page) [role=search] button{--pico-form-element-spacing-horizontal:2rem}:where(.test-page) details summary[role=button]:not(.outline)::after{filter:brightness(0) invert(1)}:where(.test-page) [aria-busy=true]:not(input,select,textarea):is(button,[type=submit],[type=button],[type=reset],[role=button]):not(.outline)::before{filter:brightness(0) invert(1)}:root:not([data-theme=dark]) .test-page, :root[data-theme=light] .test-page{--pico-background-color:#fff;--pico-color:#373c44;--pico-text-selection-color:rgba(2, 154, 232, 0.25);--pico-muted-color:#646b79;--pico-muted-border-color:#e7eaf0;--pico-primary:#0172ad;--pico-primary-background:#0172ad;--pico-primary-border:var(--pico-primary-background);--pico-primary-underline:rgba(1, 114, 173, 0.5);--pico-primary-hover:#015887;--pico-primary-hover-background:#02659a;--pico-primary-hover-border:var(--pico-primary-hover-background);--pico-primary-hover-underline:var(--pico-primary-hover);--pico-primary-focus:rgba(2, 154, 232, 0.5);--pico-primary-inverse:#fff;--pico-secondary:#5d6b89;--pico-secondary-background:#525f7a;--pico-secondary-border:var(--pico-secondary-background);--pico-secondary-underline:rgba(93, 107, 137, 0.5);--pico-secondary-hover:#48536b;--pico-secondary-hover-background:#48536b;--pico-secondary-hover-border:var(--pico-secondary-hover-background);--pico-secondary-hover-underline:var(--pico-secondary-hover);--pico-secondary-focus:rgba(93, 107, 137, 0.25);--pico-secondary-inverse:#fff;--pico-contrast:#181c25;--pico-contrast-background:#181c25;--pico-contrast-border:var(--pico-contrast-background);--pico-contrast-underline:rgba(24, 28, 37, 0.5);--pico-contrast-hover:#000;--pico-contrast-hover-background:#000;--pico-contrast-hover-border:var(--pico-contrast-hover-background);--pico-contrast-hover-underline:var(--pico-secondary-hover);--pico-contrast-focus:rgba(93, 107, 137, 0.25);--pico-contrast-inverse:#fff;--pico-box-shadow:0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698),0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024),0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03),0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036),0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302),0.5rem 1rem 6rem rgba(129, 145, 181, 0.06),0 0 0 0.0625rem rgba(129, 145, 181, 0.015);--pico-h1-color:#2d3138;--pico-h2-color:#373c44;--pico-h3-color:#424751;--pico-h4-color:#4d535e;--pico-h5-color:#5c6370;--pico-h6-color:#646b79;--pico-mark-background-color:#fde7c0;--pico-mark-color:#0f1114;--pico-ins-color:#1d6a54;--pico-del-color:#883935;--pico-blockquote-border-color:var(--pico-muted-border-color);--pico-blockquote-footer-color:var(--pico-muted-color);--pico-button-box-shadow:0 0 0 rgba(0, 0, 0, 0);--pico-button-hover-box-shadow:0 0 0 rgba(0, 0, 0, 0);--pico-table-border-color:var(--pico-muted-border-color);--pico-table-row-stripped-background-color:rgba(111, 120, 135, 0.0375);--pico-code-background-color:#f3f5f7;--pico-code-color:#646b79;--pico-code-kbd-background-color:var(--pico-color);--pico-code-kbd-color:var(--pico-background-color);--pico-form-element-background-color:#fbfcfc;--pico-form-element-selected-background-color:#dfe3eb;--pico-form-element-border-color:#cfd5e2;--pico-form-element-color:#23262c;--pico-form-element-placeholder-color:var(--pico-muted-color);--pico-form-element-active-background-color:#fff;--pico-form-element-active-border-color:var(--pico-primary-border);--pico-form-element-focus-color:var(--pico-primary-border);--pico-form-element-disabled-opacity:0.5;--pico-form-element-invalid-border-color:#b86a6b;--pico-form-element-invalid-active-border-color:#c84f48;--pico-form-element-invalid-focus-color:var(--pico-form-element-invalid-active-border-color);--pico-form-element-valid-border-color:#4c9b8a;--pico-form-element-valid-active-border-color:#279977;--pico-form-element-valid-focus-color:var(--pico-form-element-valid-active-border-color);--pico-switch-background-color:#bfc7d9;--pico-switch-checked-background-color:var(--pico-primary-background);--pico-switch-color:#fff;--pico-switch-thumb-box-shadow:0 0 0 rgba(0, 0, 0, 0);--pico-range-border-color:#dfe3eb;--pico-range-active-border-color:#bfc7d9;--pico-range-thumb-border-color:var(--pico-background-color);--pico-range-thumb-color:var(--pico-secondary-background);--pico-range-thumb-active-color:var(--pico-primary-background);--pico-accordion-border-color:var(--pico-muted-border-color);--pico-accordion-active-summary-color:var(--pico-primary-hover);--pico-accordion-close-summary-color:var(--pico-color);--pico-accordion-open-summary-color:var(--pico-muted-color);--pico-card-background-color:var(--pico-background-color);--pico-card-border-color:var(--pico-muted-border-color);--pico-card-box-shadow:var(--pico-box-shadow);--pico-card-sectioning-background-color:#fbfcfc;--pico-dropdown-background-color:#fff;--pico-dropdown-border-color:#eff1f4;--pico-dropdown-box-shadow:var(--pico-box-shadow);--pico-dropdown-color:var(--pico-color);--pico-dropdown-hover-background-color:#eff1f4;--pico-loading-spinner-opacity:0.5;--pico-modal-overlay-background-color:rgba(232, 234, 237, 0.75);--pico-progress-background-color:#dfe3eb;--pico-progress-color:var(--pico-primary-background);--pico-tooltip-background-color:var(--pico-contrast-background);--pico-tooltip-color:var(--pico-contrast-inverse);--pico-icon-valid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(76, 155, 138)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--pico-icon-invalid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(200, 79, 72)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");color-scheme:light}:root:not([data-theme=dark]) .test-page input:is([type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[type=file]), :root[data-theme=light] .test-page input:is([type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[type=file]){--pico-form-element-focus-color:var(--pico-primary-focus)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme]) .test-page{--pico-background-color:#13171f;--pico-color:#c2c7d0;--pico-text-selection-color:rgba(1, 170, 255, 0.1875);--pico-muted-color:#7b8495;--pico-muted-border-color:#202632;--pico-primary:#01aaff;--pico-primary-background:#0172ad;--pico-primary-border:var(--pico-primary-background);--pico-primary-underline:rgba(1, 170, 255, 0.5);--pico-primary-hover:#79c0ff;--pico-primary-hover-background:#017fc0;--pico-primary-hover-border:var(--pico-primary-hover-background);--pico-primary-hover-underline:var(--pico-primary-hover);--pico-primary-focus:rgba(1, 170, 255, 0.375);--pico-primary-inverse:#fff;--pico-secondary:#969eaf;--pico-secondary-background:#525f7a;--pico-secondary-border:var(--pico-secondary-background);--pico-secondary-underline:rgba(150, 158, 175, 0.5);--pico-secondary-hover:#b3b9c5;--pico-secondary-hover-background:#5d6b89;--pico-secondary-hover-border:var(--pico-secondary-hover-background);--pico-secondary-hover-underline:var(--pico-secondary-hover);--pico-secondary-focus:rgba(144, 158, 190, 0.25);--pico-secondary-inverse:#fff;--pico-contrast:#dfe3eb;--pico-contrast-background:#eff1f4;--pico-contrast-border:var(--pico-contrast-background);--pico-contrast-underline:rgba(223, 227, 235, 0.5);--pico-contrast-hover:#fff;--pico-contrast-hover-background:#fff;--pico-contrast-hover-border:var(--pico-contrast-hover-background);--pico-contrast-hover-underline:var(--pico-contrast-hover);--pico-contrast-focus:rgba(207, 213, 226, 0.25);--pico-contrast-inverse:#000;--pico-box-shadow:0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698),0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024),0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03),0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036),0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302),0.5rem 1rem 6rem rgba(7, 9, 12, 0.06),0 0 0 0.0625rem rgba(7, 9, 12, 0.015);--pico-h1-color:#f0f1f3;--pico-h2-color:#e0e3e7;--pico-h3-color:#c2c7d0;--pico-h4-color:#b3b9c5;--pico-h5-color:#a4acba;--pico-h6-color:#8891a4;--pico-mark-background-color:#014063;--pico-mark-color:#fff;--pico-ins-color:#62af9a;--pico-del-color:#ce7e7b;--pico-blockquote-border-color:var(--pico-muted-border-color);--pico-blockquote-footer-color:var(--pico-muted-color);--pico-button-box-shadow:0 0 0 rgba(0, 0, 0, 0);--pico-button-hover-box-shadow:0 0 0 rgba(0, 0, 0, 0);--pico-table-border-color:var(--pico-muted-border-color);--pico-table-row-stripped-background-color:rgba(111, 120, 135, 0.0375);--pico-code-background-color:#1a1f28;--pico-code-color:#8891a4;--pico-code-kbd-background-color:var(--pico-color);--pico-code-kbd-color:var(--pico-background-color);--pico-form-element-background-color:#1c212c;--pico-form-element-selected-background-color:#2a3140;--pico-form-element-border-color:#2a3140;--pico-form-element-color:#e0e3e7;--pico-form-element-placeholder-color:#8891a4;--pico-form-element-active-background-color:#1a1f28;--pico-form-element-active-border-color:var(--pico-primary-border);--pico-form-element-focus-color:var(--pico-primary-border);--pico-form-element-disabled-opacity:0.5;--pico-form-element-invalid-border-color:#964a50;--pico-form-element-invalid-active-border-color:#b7403b;--pico-form-element-invalid-focus-color:var(--pico-form-element-invalid-active-border-color);--pico-form-element-valid-border-color:#2a7b6f;--pico-form-element-valid-active-border-color:#16896a;--pico-form-element-valid-focus-color:var(--pico-form-element-valid-active-border-color);--pico-switch-background-color:#333c4e;--pico-switch-checked-background-color:var(--pico-primary-background);--pico-switch-color:#fff;--pico-switch-thumb-box-shadow:0 0 0 rgba(0, 0, 0, 0);--pico-range-border-color:#202632;--pico-range-active-border-color:#2a3140;--pico-range-thumb-border-color:var(--pico-background-color);--pico-range-thumb-color:var(--pico-secondary-background);--pico-range-thumb-active-color:var(--pico-primary-background);--pico-accordion-border-color:var(--pico-muted-border-color);--pico-accordion-active-summary-color:var(--pico-primary-hover);--pico-accordion-close-summary-color:var(--pico-color);--pico-accordion-open-summary-color:var(--pico-muted-color);--pico-card-background-color:#181c25;--pico-card-border-color:var(--pico-card-background-color);--pico-card-box-shadow:var(--pico-box-shadow);--pico-card-sectioning-background-color:#1a1f28;--pico-dropdown-background-color:#181c25;--pico-dropdown-border-color:#202632;--pico-dropdown-box-shadow:var(--pico-box-shadow);--pico-dropdown-color:var(--pico-color);--pico-dropdown-hover-background-color:#202632;--pico-loading-spinner-opacity:0.5;--pico-modal-overlay-background-color:rgba(8, 9, 10, 0.75);--pico-progress-background-color:#202632;--pico-progress-color:var(--pico-primary-background);--pico-tooltip-background-color:var(--pico-contrast-background);--pico-tooltip-color:var(--pico-contrast-inverse);--pico-icon-valid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--pico-icon-invalid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(150, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");color-scheme:dark}:root:not([data-theme]) .test-page input:is([type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[type=file]){--pico-form-element-focus-color:var(--pico-primary-focus)}:root:not([data-theme]) .test-page details summary[role=button].contrast:not(.outline)::after{filter:brightness(0)}:root:not([data-theme]) .test-page [aria-busy=true]:not(input,select,textarea).contrast:is(button,[type=submit],[type=button],[type=reset],[role=button]):not(.outline)::before{filter:brightness(0)}}:root[data-theme=dark] .test-page{--pico-background-color:#13171f;--pico-color:#c2c7d0;--pico-text-selection-color:rgba(1, 170, 255, 0.1875);--pico-muted-color:#7b8495;--pico-muted-border-color:#202632;--pico-primary:#01aaff;--pico-primary-background:#0172ad;--pico-primary-border:var(--pico-primary-background);--pico-primary-underline:rgba(1, 170, 255, 0.5);--pico-primary-hover:#79c0ff;--pico-primary-hover-background:#017fc0;--pico-primary-hover-border:var(--pico-primary-hover-background);--pico-primary-hover-underline:var(--pico-primary-hover);--pico-primary-focus:rgba(1, 170, 255, 0.375);--pico-primary-inverse:#fff;--pico-secondary:#969eaf;--pico-secondary-background:#525f7a;--pico-secondary-border:var(--pico-secondary-background);--pico-secondary-underline:rgba(150, 158, 175, 0.5);--pico-secondary-hover:#b3b9c5;--pico-secondary-hover-background:#5d6b89;--pico-secondary-hover-border:var(--pico-secondary-hover-background);--pico-secondary-hover-underline:var(--pico-secondary-hover);--pico-secondary-focus:rgba(144, 158, 190, 0.25);--pico-secondary-inverse:#fff;--pico-contrast:#dfe3eb;--pico-contrast-background:#eff1f4;--pico-contrast-border:var(--pico-contrast-background);--pico-contrast-underline:rgba(223, 227, 235, 0.5);--pico-contrast-hover:#fff;--pico-contrast-hover-background:#fff;--pico-contrast-hover-border:var(--pico-contrast-hover-background);--pico-contrast-hover-underline:var(--pico-contrast-hover);--pico-contrast-focus:rgba(207, 213, 226, 0.25);--pico-contrast-inverse:#000;--pico-box-shadow:0.0145rem 0.029rem 0.174rem rgba(7, 9, 12, 0.01698),0.0335rem 0.067rem 0.402rem rgba(7, 9, 12, 0.024),0.0625rem 0.125rem 0.75rem rgba(7, 9, 12, 0.03),0.1125rem 0.225rem 1.35rem rgba(7, 9, 12, 0.036),0.2085rem 0.417rem 2.502rem rgba(7, 9, 12, 0.04302),0.5rem 1rem 6rem rgba(7, 9, 12, 0.06),0 0 0 0.0625rem rgba(7, 9, 12, 0.015);--pico-h1-color:#f0f1f3;--pico-h2-color:#e0e3e7;--pico-h3-color:#c2c7d0;--pico-h4-color:#b3b9c5;--pico-h5-color:#a4acba;--pico-h6-color:#8891a4;--pico-mark-background-color:#014063;--pico-mark-color:#fff;--pico-ins-color:#62af9a;--pico-del-color:#ce7e7b;--pico-blockquote-border-color:var(--pico-muted-border-color);--pico-blockquote-footer-color:var(--pico-muted-color);--pico-button-box-shadow:0 0 0 rgba(0, 0, 0, 0);--pico-button-hover-box-shadow:0 0 0 rgba(0, 0, 0, 0);--pico-table-border-color:var(--pico-muted-border-color);--pico-table-row-stripped-background-color:rgba(111, 120, 135, 0.0375);--pico-code-background-color:#1a1f28;--pico-code-color:#8891a4;--pico-code-kbd-background-color:var(--pico-color);--pico-code-kbd-color:var(--pico-background-color);--pico-form-element-background-color:#1c212c;--pico-form-element-selected-background-color:#2a3140;--pico-form-element-border-color:#2a3140;--pico-form-element-color:#e0e3e7;--pico-form-element-placeholder-color:#8891a4;--pico-form-element-active-background-color:#1a1f28;--pico-form-element-active-border-color:var(--pico-primary-border);--pico-form-element-focus-color:var(--pico-primary-border);--pico-form-element-disabled-opacity:0.5;--pico-form-element-invalid-border-color:#964a50;--pico-form-element-invalid-active-border-color:#b7403b;--pico-form-element-invalid-focus-color:var(--pico-form-element-invalid-active-border-color);--pico-form-element-valid-border-color:#2a7b6f;--pico-form-element-valid-active-border-color:#16896a;--pico-form-element-valid-focus-color:var(--pico-form-element-valid-active-border-color);--pico-switch-background-color:#333c4e;--pico-switch-checked-background-color:var(--pico-primary-background);--pico-switch-color:#fff;--pico-switch-thumb-box-shadow:0 0 0 rgba(0, 0, 0, 0);--pico-range-border-color:#202632;--pico-range-active-border-color:#2a3140;--pico-range-thumb-border-color:var(--pico-background-color);--pico-range-thumb-color:var(--pico-secondary-background);--pico-range-thumb-active-color:var(--pico-primary-background);--pico-accordion-border-color:var(--pico-muted-border-color);--pico-accordion-active-summary-color:var(--pico-primary-hover);--pico-accordion-close-summary-color:var(--pico-color);--pico-accordion-open-summary-color:var(--pico-muted-color);--pico-card-background-color:#181c25;--pico-card-border-color:var(--pico-card-background-color);--pico-card-box-shadow:var(--pico-box-shadow);--pico-card-sectioning-background-color:#1a1f28;--pico-dropdown-background-color:#181c25;--pico-dropdown-border-color:#202632;--pico-dropdown-box-shadow:var(--pico-box-shadow);--pico-dropdown-color:var(--pico-color);--pico-dropdown-hover-background-color:#202632;--pico-loading-spinner-opacity:0.5;--pico-modal-overlay-background-color:rgba(8, 9, 10, 0.75);--pico-progress-background-color:#202632;--pico-progress-color:var(--pico-primary-background);--pico-tooltip-background-color:var(--pico-contrast-background);--pico-tooltip-color:var(--pico-contrast-inverse);--pico-icon-valid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--pico-icon-invalid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(150, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");color-scheme:dark}:root[data-theme=dark] .test-page input:is([type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[type=file]){--pico-form-element-focus-color:var(--pico-primary-focus)}:root[data-theme=dark] .test-page details summary[role=button].contrast:not(.outline)::after{filter:brightness(0)}:root[data-theme=dark] .test-page [aria-busy=true]:not(input,select,textarea).contrast:is(button,[type=submit],[type=button],[type=reset],[role=button]):not(.outline)::before{filter:brightness(0)}:where(.test-page) [type=checkbox], :where(.test-page) [type=radio], :where(.test-page) [type=range], :where(.test-page) progress{accent-color:var(--pico-primary)}:where(.test-page) *, :where(.test-page) ::after, :where(.test-page) ::before{box-sizing:border-box;background-repeat:no-repeat}:where(.test-page) ::after, :where(.test-page) ::before{text-decoration:inherit;vertical-align:inherit}:where(.test-page) :where(:root){-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;background-color:var(--pico-background-color);color:var(--pico-color);font-weight:var(--pico-font-weight);font-size:var(--pico-font-size);line-height:var(--pico-line-height);font-family:var(--pico-font-family);text-underline-offset:var(--pico-text-underline-offset);text-rendering:optimizeLegibility;overflow-wrap:break-word;-moz-tab-size:4;-o-tab-size:4;tab-size:4}.test-page{width:100%;margin:0}:where(.test-page) main{display:block}.test-page>footer, .test-page>header, .test-page>main{padding-block:var(--pico-block-spacing-vertical)}:where(.test-page) section{margin-bottom:var(--pico-block-spacing-vertical)}:where(.test-page) .container, :where(.test-page) .container-fluid{width:100%;margin-right:auto;margin-left:auto;padding-right:var(--pico-spacing);padding-left:var(--pico-spacing)}@media (min-width:576px){:where(.test-page) .container{max-width:510px;padding-right:0;padding-left:0}}@media (min-width:768px){:where(.test-page) .container{max-width:700px}}@media (min-width:1024px){:where(.test-page) .container{max-width:950px}}@media (min-width:1280px){:where(.test-page) .container{max-width:1200px}}@media (min-width:1536px){:where(.test-page) .container{max-width:1450px}}:where(.test-page) .grid{grid-column-gap:var(--pico-grid-column-gap);grid-row-gap:var(--pico-grid-row-gap);display:grid;grid-template-columns:1fr}@media (min-width:768px){:where(.test-page) .grid{grid-template-columns:repeat(auto-fit,minmax(0%,1fr))}}:where(.test-page) .grid>*{min-width:0}:where(.test-page) .overflow-auto{overflow:auto}:where(.test-page) b, :where(.test-page) strong{font-weight:bolder}:where(.test-page) sub, :where(.test-page) sup{position:relative;font-size:.75em;line-height:0;vertical-align:baseline}:where(.test-page) sub{bottom:-.25em}:where(.test-page) sup{top:-.5em}:where(.test-page) address, :where(.test-page) blockquote, :where(.test-page) dl, :where(.test-page) ol, :where(.test-page) p, :where(.test-page) pre, :where(.test-page) table, :where(.test-page) ul{margin-top:0;margin-bottom:var(--pico-typography-spacing-vertical);color:var(--pico-color);font-style:normal;font-weight:var(--pico-font-weight)}:where(.test-page) h1, :where(.test-page) h2, :where(.test-page) h3, :where(.test-page) h4, :where(.test-page) h5, :where(.test-page) h6{margin-top:0;margin-bottom:var(--pico-typography-spacing-vertical);color:var(--pico-color);font-weight:var(--pico-font-weight);font-size:var(--pico-font-size);line-height:var(--pico-line-height);font-family:var(--pico-font-family)}:where(.test-page) h1{--pico-color:var(--pico-h1-color)}:where(.test-page) h2{--pico-color:var(--pico-h2-color)}:where(.test-page) h3{--pico-color:var(--pico-h3-color)}:where(.test-page) h4{--pico-color:var(--pico-h4-color)}:where(.test-page) h5{--pico-color:var(--pico-h5-color)}:where(.test-page) h6{--pico-color:var(--pico-h6-color)}:where(.test-page) :where(article,address,blockquote,dl,figure,form,ol,p,pre,table,ul)~:is(h1,h2,h3,h4,h5,h6){margin-top:var(--pico-typography-spacing-top)}:where(.test-page) p{margin-bottom:var(--pico-typography-spacing-vertical)}:where(.test-page) hgroup{margin-bottom:var(--pico-typography-spacing-vertical)}:where(.test-page) hgroup>*{margin-top:0;margin-bottom:0}:where(.test-page) hgroup>:not(:first-child):last-child{--pico-color:var(--pico-muted-color);--pico-font-weight:unset;font-size:1rem}:where(.test-page) :where(ol,ul) li{margin-bottom:calc(var(--pico-typography-spacing-vertical) * .25)}:where(.test-page) :where(dl,ol,ul) :where(dl,ol,ul){margin:0;margin-top:calc(var(--pico-typography-spacing-vertical) * .25)}:where(.test-page) ul li{list-style:square}:where(.test-page) mark{padding:.125rem .25rem;background-color:var(--pico-mark-background-color);color:var(--pico-mark-color);vertical-align:baseline}:where(.test-page) blockquote{display:block;margin:var(--pico-typography-spacing-vertical) 0;padding:var(--pico-spacing);border-right:none;border-left:.25rem solid var(--pico-blockquote-border-color);border-inline-start:0.25rem solid var(--pico-blockquote-border-color);border-inline-end:none}:where(.test-page) blockquote footer{margin-top:calc(var(--pico-typography-spacing-vertical) * .5);color:var(--pico-blockquote-footer-color)}:where(.test-page) abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}:where(.test-page) ins{color:var(--pico-ins-color);text-decoration:none}:where(.test-page) del{color:var(--pico-del-color)}:where(.test-page) ::-moz-selection{background-color:var(--pico-text-selection-color)}:where(.test-page) ::selection{background-color:var(--pico-text-selection-color)}:where(.test-page) :where(a:not([role=button])), :where(.test-page) [role=link]{--pico-color:var(--pico-primary);--pico-background-color:transparent;--pico-underline:var(--pico-primary-underline);outline:0;background-color:var(--pico-background-color);color:var(--pico-color);-webkit-text-decoration:var(--pico-text-decoration);text-decoration:var(--pico-text-decoration);text-decoration-color:var(--pico-underline);text-underline-offset:0.125em;transition:background-color var(--pico-transition),color var(--pico-transition),box-shadow var(--pico-transition),-webkit-text-decoration var(--pico-transition);transition:background-color var(--pico-transition),color var(--pico-transition),text-decoration var(--pico-transition),box-shadow var(--pico-transition);transition:background-color var(--pico-transition),color var(--pico-transition),text-decoration var(--pico-transition),box-shadow var(--pico-transition),-webkit-text-decoration var(--pico-transition)}:where(.test-page) :where(a:not([role=button])):is([aria-current]:not([aria-current=false]),:hover,:active,:focus), :where(.test-page) [role=link]:is([aria-current]:not([aria-current=false]),:hover,:active,:focus){--pico-color:var(--pico-primary-hover);--pico-underline:var(--pico-primary-hover-underline);--pico-text-decoration:underline}:where(.test-page) :where(a:not([role=button])):focus-visible, :where(.test-page) [role=link]:focus-visible{box-shadow:0 0 0 var(--pico-outline-width) var(--pico-primary-focus)}:where(.test-page) :where(a:not([role=button])).secondary, :where(.test-page) [role=link].secondary{--pico-color:var(--pico-secondary);--pico-underline:var(--pico-secondary-underline)}:where(.test-page) :where(a:not([role=button])).secondary:is([aria-current]:not([aria-current=false]),:hover,:active,:focus), :where(.test-page) [role=link].secondary:is([aria-current]:not([aria-current=false]),:hover,:active,:focus){--pico-color:var(--pico-secondary-hover);--pico-underline:var(--pico-secondary-hover-underline)}:where(.test-page) :where(a:not([role=button])).contrast, :where(.test-page) [role=link].contrast{--pico-color:var(--pico-contrast);--pico-underline:var(--pico-contrast-underline)}:where(.test-page) :where(a:not([role=button])).contrast:is([aria-current]:not([aria-current=false]),:hover,:active,:focus), :where(.test-page) [role=link].contrast:is([aria-current]:not([aria-current=false]),:hover,:active,:focus){--pico-color:var(--pico-contrast-hover);--pico-underline:var(--pico-contrast-hover-underline)}:where(.test-page) a[role=button]{display:inline-block}:where(.test-page) button{margin:0;overflow:visible;font-family:inherit;text-transform:none}:where(.test-page) [type=button], :where(.test-page) [type=reset], :where(.test-page) [type=submit], :where(.test-page) button{-webkit-appearance:button}:where(.test-page) [role=button], :where(.test-page) [type=button], :where(.test-page) [type=file]::file-selector-button, :where(.test-page) [type=reset], :where(.test-page) [type=submit], :where(.test-page) button{--pico-background-color:var(--pico-primary-background);--pico-border-color:var(--pico-primary-border);--pico-color:var(--pico-primary-inverse);--pico-box-shadow:var(--pico-button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));padding:var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);border:var(--pico-border-width) solid var(--pico-border-color);border-radius:var(--pico-border-radius);outline:0;background-color:var(--pico-background-color);box-shadow:var(--pico-box-shadow);color:var(--pico-color);font-weight:var(--pico-font-weight);font-size:1rem;line-height:var(--pico-line-height);text-align:center;text-decoration:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:background-color var(--pico-transition),border-color var(--pico-transition),color var(--pico-transition),box-shadow var(--pico-transition)}:where(.test-page) [role=button]:is(:hover,:active,:focus), :where(.test-page) [role=button]:is([aria-current]:not([aria-current=false])), :where(.test-page) [type=button]:is(:hover,:active,:focus), :where(.test-page) [type=button]:is([aria-current]:not([aria-current=false])), :where(.test-page) [type=file]::file-selector-button:is(:hover,:active,:focus), :where(.test-page) [type=file]::file-selector-button:is([aria-current]:not([aria-current=false])), :where(.test-page) [type=reset]:is(:hover,:active,:focus), :where(.test-page) [type=reset]:is([aria-current]:not([aria-current=false])), :where(.test-page) [type=submit]:is(:hover,:active,:focus), :where(.test-page) [type=submit]:is([aria-current]:not([aria-current=false])), :where(.test-page) button:is(:hover,:active,:focus), :where(.test-page) button:is([aria-current]:not([aria-current=false])){--pico-background-color:var(--pico-primary-hover-background);--pico-border-color:var(--pico-primary-hover-border);--pico-box-shadow:var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));--pico-color:var(--pico-primary-inverse)}:where(.test-page) [role=button]:focus, :where(.test-page) [role=button]:is([aria-current]:not([aria-current=false])):focus, :where(.test-page) [type=button]:focus, :where(.test-page) [type=button]:is([aria-current]:not([aria-current=false])):focus, :where(.test-page) [type=file]::file-selector-button:focus, :where(.test-page) [type=file]::file-selector-button:is([aria-current]:not([aria-current=false])):focus, :where(.test-page) [type=reset]:focus, :where(.test-page) [type=reset]:is([aria-current]:not([aria-current=false])):focus, :where(.test-page) [type=submit]:focus, :where(.test-page) [type=submit]:is([aria-current]:not([aria-current=false])):focus, :where(.test-page) button:focus, :where(.test-page) button:is([aria-current]:not([aria-current=false])):focus{--pico-box-shadow:var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),0 0 0 var(--pico-outline-width) var(--pico-primary-focus)}:where(.test-page) [type=button], :where(.test-page) [type=reset], :where(.test-page) [type=submit]{margin-bottom:var(--pico-spacing)}:where(.test-page) :is(button,[type=submit],[type=button],[role=button]).secondary, :where(.test-page) [type=file]::file-selector-button, :where(.test-page) [type=reset]{--pico-background-color:var(--pico-secondary-background);--pico-border-color:var(--pico-secondary-border);--pico-color:var(--pico-secondary-inverse);cursor:pointer}:where(.test-page) :is(button,[type=submit],[type=button],[role=button]).secondary:is([aria-current]:not([aria-current=false]),:hover,:active,:focus), :where(.test-page) [type=file]::file-selector-button:is([aria-current]:not([aria-current=false]),:hover,:active,:focus), :where(.test-page) [type=reset]:is([aria-current]:not([aria-current=false]),:hover,:active,:focus){--pico-background-color:var(--pico-secondary-hover-background);--pico-border-color:var(--pico-secondary-hover-border);--pico-color:var(--pico-secondary-inverse)}:where(.test-page) :is(button,[type=submit],[type=button],[role=button]).secondary:focus, :where(.test-page) :is(button,[type=submit],[type=button],[role=button]).secondary:is([aria-current]:not([aria-current=false])):focus, :where(.test-page) [type=file]::file-selector-button:focus, :where(.test-page) [type=file]::file-selector-button:is([aria-current]:not([aria-current=false])):focus, :where(.test-page) [type=reset]:focus, :where(.test-page) [type=reset]:is([aria-current]:not([aria-current=false])):focus{--pico-box-shadow:var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),0 0 0 var(--pico-outline-width) var(--pico-secondary-focus)}:where(.test-page) :is(button,[type=submit],[type=button],[role=button]).contrast{--pico-background-color:var(--pico-contrast-background);--pico-border-color:var(--pico-contrast-border);--pico-color:var(--pico-contrast-inverse)}:where(.test-page) :is(button,[type=submit],[type=button],[role=button]).contrast:is([aria-current]:not([aria-current=false]),:hover,:active,:focus){--pico-background-color:var(--pico-contrast-hover-background);--pico-border-color:var(--pico-contrast-hover-border);--pico-color:var(--pico-contrast-inverse)}:where(.test-page) :is(button,[type=submit],[type=button],[role=button]).contrast:focus, :where(.test-page) :is(button,[type=submit],[type=button],[role=button]).contrast:is([aria-current]:not([aria-current=false])):focus{--pico-box-shadow:var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),0 0 0 var(--pico-outline-width) var(--pico-contrast-focus)}:where(.test-page) :is(button,[type=submit],[type=button],[role=button]).outline, :where(.test-page) [type=reset].outline{--pico-background-color:transparent;--pico-color:var(--pico-primary);--pico-border-color:var(--pico-primary)}:where(.test-page) :is(button,[type=submit],[type=button],[role=button]).outline:is([aria-current]:not([aria-current=false]),:hover,:active,:focus), :where(.test-page) [type=reset].outline:is([aria-current]:not([aria-current=false]),:hover,:active,:focus){--pico-background-color:transparent;--pico-color:var(--pico-primary-hover);--pico-border-color:var(--pico-primary-hover)}:where(.test-page) :is(button,[type=submit],[type=button],[role=button]).outline.secondary, :where(.test-page) [type=reset].outline{--pico-color:var(--pico-secondary);--pico-border-color:var(--pico-secondary)}:where(.test-page) :is(button,[type=submit],[type=button],[role=button]).outline.secondary:is([aria-current]:not([aria-current=false]),:hover,:active,:focus), :where(.test-page) [type=reset].outline:is([aria-current]:not([aria-current=false]),:hover,:active,:focus){--pico-color:var(--pico-secondary-hover);--pico-border-color:var(--pico-secondary-hover)}:where(.test-page) :is(button,[type=submit],[type=button],[role=button]).outline.contrast{--pico-color:var(--pico-contrast);--pico-border-color:var(--pico-contrast)}:where(.test-page) :is(button,[type=submit],[type=button],[role=button]).outline.contrast:is([aria-current]:not([aria-current=false]),:hover,:active,:focus){--pico-color:var(--pico-contrast-hover);--pico-border-color:var(--pico-contrast-hover)}:where(.test-page) :where(button,[type=submit],[type=reset],[type=button],[role=button])[disabled], :where(.test-page) :where(fieldset[disabled]) :is(button,[type=submit],[type=button],[type=reset],[role=button]){opacity:.5;pointer-events:none}:where(.test-page) :where(table){width:100%;border-collapse:collapse;border-spacing:0;text-indent:0}:where(.test-page) td, :where(.test-page) th{padding:calc(var(--pico-spacing)/ 2) var(--pico-spacing);border-bottom:var(--pico-border-width) solid var(--pico-table-border-color);background-color:var(--pico-background-color);color:var(--pico-color);font-weight:var(--pico-font-weight);text-align:left;text-align:start}:where(.test-page) tfoot td, :where(.test-page) tfoot th{border-top:var(--pico-border-width) solid var(--pico-table-border-color);border-bottom:0}:where(.test-page) table.striped tbody tr:nth-child(odd) td, :where(.test-page) table.striped tbody tr:nth-child(odd) th{background-color:var(--pico-table-row-stripped-background-color)}:where(.test-page) :where(audio,canvas,iframe,img,svg,video){vertical-align:middle}:where(.test-page) audio, :where(.test-page) video{display:inline-block}:where(.test-page) audio:not([controls]){display:none;height:0}:where(.test-page) :where(iframe){border-style:none}:where(.test-page) img{max-width:100%;height:auto;border-style:none}:where(.test-page) :where(svg:not([fill])){fill:currentColor}:where(.test-page) svg:not(:root){overflow:hidden}:where(.test-page) code, :where(.test-page) kbd, :where(.test-page) pre, :where(.test-page) samp{font-size:.875em;font-family:var(--pico-font-family)}:where(.test-page) pre code{font-size:inherit;font-family:inherit}:where(.test-page) pre{-ms-overflow-style:scrollbar;overflow:auto}:where(.test-page) code, :where(.test-page) kbd, :where(.test-page) pre{border-radius:var(--pico-border-radius);background:var(--pico-code-background-color);color:var(--pico-code-color);font-weight:var(--pico-font-weight);line-height:initial}:where(.test-page) code, :where(.test-page) kbd{display:inline-block;padding:.375rem}:where(.test-page) pre{display:block;margin-bottom:var(--pico-spacing);overflow-x:auto}:where(.test-page) pre>code{display:block;padding:var(--pico-spacing);background:0 0;line-height:var(--pico-line-height)}:where(.test-page) kbd{background-color:var(--pico-code-kbd-background-color);color:var(--pico-code-kbd-color);vertical-align:baseline}:where(.test-page) figure{display:block;margin:0;padding:0}:where(.test-page) figure figcaption{padding:calc(var(--pico-spacing) * .5) 0;color:var(--pico-muted-color)}:where(.test-page) hr{height:0;margin:var(--pico-typography-spacing-vertical) 0;border:0;border-top:1px solid var(--pico-muted-border-color);color:inherit}:where(.test-page) [hidden], :where(.test-page) template{display:none!important}:where(.test-page) canvas{display:inline-block}:where(.test-page) input, :where(.test-page) optgroup, :where(.test-page) select, :where(.test-page) textarea{margin:0;font-size:1rem;line-height:var(--pico-line-height);font-family:inherit;letter-spacing:inherit}:where(.test-page) input{overflow:visible}:where(.test-page) select{text-transform:none}:where(.test-page) legend{max-width:100%;padding:0;color:inherit;white-space:normal}:where(.test-page) textarea{overflow:auto}:where(.test-page) [type=checkbox], :where(.test-page) [type=radio]{padding:0}:where(.test-page) ::-webkit-inner-spin-button, :where(.test-page) ::-webkit-outer-spin-button{height:auto}:where(.test-page) [type=search]{-webkit-appearance:textfield;outline-offset:-2px}:where(.test-page) [type=search]::-webkit-search-decoration{-webkit-appearance:none}:where(.test-page) ::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}:where(.test-page) ::-moz-focus-inner{padding:0;border-style:none}:where(.test-page) :-moz-focusring{outline:0}:where(.test-page) :-moz-ui-invalid{box-shadow:none}:where(.test-page) ::-ms-expand{display:none}:where(.test-page) [type=file], :where(.test-page) [type=range]{padding:0;border-width:0}:where(.test-page) input:not([type=checkbox],[type=radio],[type=range]){height:calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2)}:where(.test-page) fieldset{width:100%;margin:0;margin-bottom:var(--pico-spacing);padding:0;border:0}:where(.test-page) fieldset legend, :where(.test-page) label{display:block;margin-bottom:calc(var(--pico-spacing) * .375);color:var(--pico-color);font-weight:var(--pico-form-label-font-weight,var(--pico-font-weight))}:where(.test-page) fieldset legend{margin-bottom:calc(var(--pico-spacing) * .5)}:where(.test-page) button[type=submit], :where(.test-page) input:not([type=checkbox],[type=radio]), :where(.test-page) select, :where(.test-page) textarea{width:100%}:where(.test-page) input:not([type=checkbox],[type=radio],[type=range],[type=file]), :where(.test-page) select, :where(.test-page) textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal)}:where(.test-page) input, :where(.test-page) select, :where(.test-page) textarea{--pico-background-color:var(--pico-form-element-background-color);--pico-border-color:var(--pico-form-element-border-color);--pico-color:var(--pico-form-element-color);--pico-box-shadow:none;border:var(--pico-border-width) solid var(--pico-border-color);border-radius:var(--pico-border-radius);outline:0;background-color:var(--pico-background-color);box-shadow:var(--pico-box-shadow);color:var(--pico-color);font-weight:var(--pico-font-weight);transition:background-color var(--pico-transition),border-color var(--pico-transition),color var(--pico-transition),box-shadow var(--pico-transition)}:where(.test-page) :where(select,textarea):not([readonly]):is(:active,:focus), :where(.test-page) input:not([type=submit],[type=button],[type=reset],[type=checkbox],[type=radio],[readonly]):is(:active,:focus){--pico-background-color:var(--pico-form-element-active-background-color)}:where(.test-page) :where(select,textarea):not([readonly]):is(:active,:focus), :where(.test-page) input:not([type=submit],[type=button],[type=reset],[role=switch],[readonly]):is(:active,:focus){--pico-border-color:var(--pico-form-element-active-border-color)}:where(.test-page) :where(select,textarea):not([readonly]):focus, :where(.test-page) input:not([type=submit],[type=button],[type=reset],[type=range],[type=file],[readonly]):focus{--pico-box-shadow:0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color)}:where(.test-page) :where(fieldset[disabled]) :is(input:not([type=submit],[type=button],[type=reset]),select,textarea), :where(.test-page) input:not([type=submit],[type=button],[type=reset])[disabled], :where(.test-page) label[aria-disabled=true], :where(.test-page) select[disabled], :where(.test-page) textarea[disabled]{opacity:var(--pico-form-element-disabled-opacity);pointer-events:none}:where(.test-page) label[aria-disabled=true] input[disabled]{opacity:1}:where(.test-page) :where(input,select,textarea):not([type=checkbox],[type=radio],[type=date],[type=datetime-local],[type=month],[type=time],[type=week],[type=range])[aria-invalid]{padding-right:calc(var(--pico-form-element-spacing-horizontal) + 1.5rem)!important;padding-left:var(--pico-form-element-spacing-horizontal);padding-inline-start:var(--pico-form-element-spacing-horizontal)!important;padding-inline-end:calc(var(--pico-form-element-spacing-horizontal) + 1.5rem)!important;background-position:center right .75rem;background-size:1rem auto;background-repeat:no-repeat}:where(.test-page) :where(input,select,textarea):not([type=checkbox],[type=radio],[type=date],[type=datetime-local],[type=month],[type=time],[type=week],[type=range])[aria-invalid=false]:not(select){background-image:var(--pico-icon-valid)}:where(.test-page) :where(input,select,textarea):not([type=checkbox],[type=radio],[type=date],[type=datetime-local],[type=month],[type=time],[type=week],[type=range])[aria-invalid=true]:not(select){background-image:var(--pico-icon-invalid)}:where(.test-page) :where(input,select,textarea)[aria-invalid=false]{--pico-border-color:var(--pico-form-element-valid-border-color)}:where(.test-page) :where(input,select,textarea)[aria-invalid=false]:is(:active,:focus){--pico-border-color:var(--pico-form-element-valid-active-border-color)!important}:where(.test-page) :where(input,select,textarea)[aria-invalid=false]:is(:active,:focus):not([type=checkbox],[type=radio]){--pico-box-shadow:0 0 0 var(--pico-outline-width) var(--pico-form-element-valid-focus-color)!important}:where(.test-page) :where(input,select,textarea)[aria-invalid=true]{--pico-border-color:var(--pico-form-element-invalid-border-color)}:where(.test-page) :where(input,select,textarea)[aria-invalid=true]:is(:active,:focus){--pico-border-color:var(--pico-form-element-invalid-active-border-color)!important}:where(.test-page) :where(input,select,textarea)[aria-invalid=true]:is(:active,:focus):not([type=checkbox],[type=radio]){--pico-box-shadow:0 0 0 var(--pico-outline-width) var(--pico-form-element-invalid-focus-color)!important}:where(.test-page) [dir=rtl] :where(input,select,textarea):not([type=checkbox],[type=radio]):is([aria-invalid],[aria-invalid=true],[aria-invalid=false]){background-position:center left .75rem}:where(.test-page) input::-webkit-input-placeholder, :where(.test-page) input::placeholder, :where(.test-page) select:invalid, :where(.test-page) textarea::-webkit-input-placeholder, :where(.test-page) textarea::placeholder{color:var(--pico-form-element-placeholder-color);opacity:1}:where(.test-page) input:not([type=checkbox],[type=radio]), :where(.test-page) select, :where(.test-page) textarea{margin-bottom:var(--pico-spacing)}:where(.test-page) select::-ms-expand{border:0;background-color:transparent}:where(.test-page) select:not([multiple],[size]){padding-right:calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);padding-left:var(--pico-form-element-spacing-horizontal);padding-inline-start:var(--pico-form-element-spacing-horizontal);padding-inline-end:calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);background-image:var(--pico-icon-chevron);background-position:center right .75rem;background-size:1rem auto;background-repeat:no-repeat}:where(.test-page) select[multiple] option:checked{background:var(--pico-form-element-selected-background-color);color:var(--pico-form-element-color)}:where(.test-page) [dir=rtl] select:not([multiple],[size]){background-position:center left .75rem}:where(.test-page) textarea{display:block;resize:vertical}:where(.test-page) textarea[aria-invalid]{--pico-icon-height:calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);background-position:top right .75rem!important;background-size:1rem var(--pico-icon-height)!important}:where(.test-page) :where(input,select,textarea,fieldset,.grid)+small{display:block;width:100%;margin-top:calc(var(--pico-spacing) * -.75);margin-bottom:var(--pico-spacing);color:var(--pico-muted-color)}:where(.test-page) :where(input,select,textarea,fieldset,.grid)[aria-invalid=false]+small{color:var(--pico-ins-color)}:where(.test-page) :where(input,select,textarea,fieldset,.grid)[aria-invalid=true]+small{color:var(--pico-del-color)}:where(.test-page) label>:where(input,select,textarea){margin-top:calc(var(--pico-spacing) * .25)}:where(.test-page) label:has([type=checkbox],[type=radio]){width:-moz-fit-content;width:fit-content;cursor:pointer}:where(.test-page) [type=checkbox], :where(.test-page) [type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:1.25em;height:1.25em;margin-top:-.125em;margin-inline-end:.5em;border-width:var(--pico-border-width);vertical-align:middle;cursor:pointer}:where(.test-page) [type=checkbox]::-ms-check, :where(.test-page) [type=radio]::-ms-check{display:none}:where(.test-page) [type=checkbox]:checked, :where(.test-page) [type=checkbox]:checked:active, :where(.test-page) [type=checkbox]:checked:focus, :where(.test-page) [type=radio]:checked, :where(.test-page) [type=radio]:checked:active, :where(.test-page) [type=radio]:checked:focus{--pico-background-color:var(--pico-primary-background);--pico-border-color:var(--pico-primary-border);background-image:var(--pico-icon-checkbox);background-position:center;background-size:.75em auto;background-repeat:no-repeat}:where(.test-page) [type=checkbox]~label, :where(.test-page) [type=radio]~label{display:inline-block;margin-bottom:0;cursor:pointer}:where(.test-page) [type=checkbox]~label:not(:last-of-type), :where(.test-page) [type=radio]~label:not(:last-of-type){margin-inline-end:1em}:where(.test-page) [type=checkbox]:indeterminate{--pico-background-color:var(--pico-primary-background);--pico-border-color:var(--pico-primary-border);background-image:var(--pico-icon-minus);background-position:center;background-size:.75em auto;background-repeat:no-repeat}:where(.test-page) [type=radio]{border-radius:50%}:where(.test-page) [type=radio]:checked, :where(.test-page) [type=radio]:checked:active, :where(.test-page) [type=radio]:checked:focus{--pico-background-color:var(--pico-primary-inverse);border-width:.35em;background-image:none}:where(.test-page) [type=checkbox][role=switch]{--pico-background-color:var(--pico-switch-background-color);--pico-color:var(--pico-switch-color);width:2.25em;height:1.25em;border:var(--pico-border-width) solid var(--pico-border-color);border-radius:1.25em;background-color:var(--pico-background-color);line-height:1.25em}:where(.test-page) [type=checkbox][role=switch]:not([aria-invalid]){--pico-border-color:var(--pico-switch-background-color)}:where(.test-page) [type=checkbox][role=switch]:before{display:block;aspect-ratio:1;height:100%;border-radius:50%;background-color:var(--pico-color);box-shadow:var(--pico-switch-thumb-box-shadow);content:"";transition:margin .1s ease-in-out}:where(.test-page) [type=checkbox][role=switch]:focus{--pico-background-color:var(--pico-switch-background-color);--pico-border-color:var(--pico-switch-background-color)}:where(.test-page) [type=checkbox][role=switch]:checked{--pico-background-color:var(--pico-switch-checked-background-color);--pico-border-color:var(--pico-switch-checked-background-color);background-image:none}:where(.test-page) [type=checkbox][role=switch]:checked::before{margin-inline-start:calc(2.25em - 1.25em)}:where(.test-page) [type=checkbox][role=switch][disabled]{--pico-background-color:var(--pico-border-color)}:where(.test-page) [type=checkbox][aria-invalid=false]:checked, :where(.test-page) [type=checkbox][aria-invalid=false]:checked:active, :where(.test-page) [type=checkbox][aria-invalid=false]:checked:focus, :where(.test-page) [type=checkbox][role=switch][aria-invalid=false]:checked, :where(.test-page) [type=checkbox][role=switch][aria-invalid=false]:checked:active, :where(.test-page) [type=checkbox][role=switch][aria-invalid=false]:checked:focus{--pico-background-color:var(--pico-form-element-valid-border-color)}:where(.test-page) [type=checkbox]:checked:active[aria-invalid=true], :where(.test-page) [type=checkbox]:checked:focus[aria-invalid=true], :where(.test-page) [type=checkbox]:checked[aria-invalid=true], :where(.test-page) [type=checkbox][role=switch]:checked:active[aria-invalid=true], :where(.test-page) [type=checkbox][role=switch]:checked:focus[aria-invalid=true], :where(.test-page) [type=checkbox][role=switch]:checked[aria-invalid=true]{--pico-background-color:var(--pico-form-element-invalid-border-color)}:where(.test-page) [type=checkbox][aria-invalid=false]:checked, :where(.test-page) [type=checkbox][aria-invalid=false]:checked:active, :where(.test-page) [type=checkbox][aria-invalid=false]:checked:focus, :where(.test-page) [type=checkbox][role=switch][aria-invalid=false]:checked, :where(.test-page) [type=checkbox][role=switch][aria-invalid=false]:checked:active, :where(.test-page) [type=checkbox][role=switch][aria-invalid=false]:checked:focus, :where(.test-page) [type=radio][aria-invalid=false]:checked, :where(.test-page) [type=radio][aria-invalid=false]:checked:active, :where(.test-page) [type=radio][aria-invalid=false]:checked:focus{--pico-border-color:var(--pico-form-element-valid-border-color)}:where(.test-page) [type=checkbox]:checked:active[aria-invalid=true], :where(.test-page) [type=checkbox]:checked:focus[aria-invalid=true], :where(.test-page) [type=checkbox]:checked[aria-invalid=true], :where(.test-page) [type=checkbox][role=switch]:checked:active[aria-invalid=true], :where(.test-page) [type=checkbox][role=switch]:checked:focus[aria-invalid=true], :where(.test-page) [type=checkbox][role=switch]:checked[aria-invalid=true], :where(.test-page) [type=radio]:checked:active[aria-invalid=true], :where(.test-page) [type=radio]:checked:focus[aria-invalid=true], :where(.test-page) [type=radio]:checked[aria-invalid=true]{--pico-border-color:var(--pico-form-element-invalid-border-color)}:where(.test-page) [type=color]::-webkit-color-swatch-wrapper{padding:0}:where(.test-page) [type=color]::-moz-focus-inner{padding:0}:where(.test-page) [type=color]::-webkit-color-swatch{border:0;border-radius:calc(var(--pico-border-radius) * .5)}:where(.test-page) [type=color]::-moz-color-swatch{border:0;border-radius:calc(var(--pico-border-radius) * .5)}:where(.test-page) input:not([type=checkbox],[type=radio],[type=range],[type=file]):is([type=date],[type=datetime-local],[type=month],[type=time],[type=week]){--pico-icon-position:0.75rem;--pico-icon-width:1rem;padding-right:calc(var(--pico-icon-width) + var(--pico-icon-position));background-image:var(--pico-icon-date);background-position:center right var(--pico-icon-position);background-size:var(--pico-icon-width) auto;background-repeat:no-repeat}:where(.test-page) input:not([type=checkbox],[type=radio],[type=range],[type=file])[type=time]{background-image:var(--pico-icon-time)}:where(.test-page) [type=date]::-webkit-calendar-picker-indicator, :where(.test-page) [type=datetime-local]::-webkit-calendar-picker-indicator, :where(.test-page) [type=month]::-webkit-calendar-picker-indicator, :where(.test-page) [type=time]::-webkit-calendar-picker-indicator, :where(.test-page) [type=week]::-webkit-calendar-picker-indicator{width:var(--pico-icon-width);margin-right:calc(var(--pico-icon-width) * -1);margin-left:var(--pico-icon-position);opacity:0}@-moz-document url-prefix(){:where(.test-page) [type=date], :where(.test-page) [type=datetime-local], :where(.test-page) [type=month], :where(.test-page) [type=time], :where(.test-page) [type=week]{padding-right:var(--pico-form-element-spacing-horizontal)!important;background-image:none!important}}:where(.test-page) [dir=rtl] :is([type=date],[type=datetime-local],[type=month],[type=time],[type=week]){text-align:right}:where(.test-page) [type=file]{--pico-color:var(--pico-muted-color);margin-left:calc(var(--pico-outline-width) * -1);padding:calc(var(--pico-form-element-spacing-vertical) * .5) 0;padding-left:var(--pico-outline-width);border:0;border-radius:0;background:0 0}:where(.test-page) [type=file]::file-selector-button{margin-right:calc(var(--pico-spacing)/ 2);padding:calc(var(--pico-form-element-spacing-vertical) * .5) var(--pico-form-element-spacing-horizontal)}:where(.test-page) [type=file]:is(:hover,:active,:focus)::file-selector-button{--pico-background-color:var(--pico-secondary-hover-background);--pico-border-color:var(--pico-secondary-hover-border)}:where(.test-page) [type=file]:focus::file-selector-button{--pico-box-shadow:var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),0 0 0 var(--pico-outline-width) var(--pico-secondary-focus)}:where(.test-page) [type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:1.25rem;background:0 0}:where(.test-page) [type=range]::-webkit-slider-runnable-track{width:100%;height:.375rem;border-radius:var(--pico-border-radius);background-color:var(--pico-range-border-color);-webkit-transition:background-color var(--pico-transition),box-shadow var(--pico-transition);transition:background-color var(--pico-transition),box-shadow var(--pico-transition)}:where(.test-page) [type=range]::-moz-range-track{width:100%;height:.375rem;border-radius:var(--pico-border-radius);background-color:var(--pico-range-border-color);-moz-transition:background-color var(--pico-transition),box-shadow var(--pico-transition);transition:background-color var(--pico-transition),box-shadow var(--pico-transition)}:where(.test-page) [type=range]::-ms-track{width:100%;height:.375rem;border-radius:var(--pico-border-radius);background-color:var(--pico-range-border-color);-ms-transition:background-color var(--pico-transition),box-shadow var(--pico-transition);transition:background-color var(--pico-transition),box-shadow var(--pico-transition)}:where(.test-page) [type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-.4375rem;border:2px solid var(--pico-range-thumb-border-color);border-radius:50%;background-color:var(--pico-range-thumb-color);cursor:pointer;-webkit-transition:background-color var(--pico-transition),transform var(--pico-transition);transition:background-color var(--pico-transition),transform var(--pico-transition)}:where(.test-page) [type=range]::-moz-range-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-.4375rem;border:2px solid var(--pico-range-thumb-border-color);border-radius:50%;background-color:var(--pico-range-thumb-color);cursor:pointer;-moz-transition:background-color var(--pico-transition),transform var(--pico-transition);transition:background-color var(--pico-transition),transform var(--pico-transition)}:where(.test-page) [type=range]::-ms-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-.4375rem;border:2px solid var(--pico-range-thumb-border-color);border-radius:50%;background-color:var(--pico-range-thumb-color);cursor:pointer;-ms-transition:background-color var(--pico-transition),transform var(--pico-transition);transition:background-color var(--pico-transition),transform var(--pico-transition)}:where(.test-page) [type=range]:active, :where(.test-page) [type=range]:focus-within{--pico-range-border-color:var(--pico-range-active-border-color);--pico-range-thumb-color:var(--pico-range-thumb-active-color)}:where(.test-page) [type=range]:active::-webkit-slider-thumb{transform:scale(1.25)}:where(.test-page) [type=range]:active::-moz-range-thumb{transform:scale(1.25)}:where(.test-page) [type=range]:active::-ms-thumb{transform:scale(1.25)}:where(.test-page) input:not([type=checkbox],[type=radio],[type=range],[type=file])[type=search]{padding-inline-start:calc(var(--pico-form-element-spacing-horizontal) + 1.75rem);background-image:var(--pico-icon-search);background-position:center left calc(var(--pico-form-element-spacing-horizontal) + .125rem);background-size:1rem auto;background-repeat:no-repeat}:where(.test-page) input:not([type=checkbox],[type=radio],[type=range],[type=file])[type=search][aria-invalid]{padding-inline-start:calc(var(--pico-form-element-spacing-horizontal) + 1.75rem)!important;background-position:center left 1.125rem,center right .75rem}:where(.test-page) input:not([type=checkbox],[type=radio],[type=range],[type=file])[type=search][aria-invalid=false]{background-image:var(--pico-icon-search),var(--pico-icon-valid)}:where(.test-page) input:not([type=checkbox],[type=radio],[type=range],[type=file])[type=search][aria-invalid=true]{background-image:var(--pico-icon-search),var(--pico-icon-invalid)}:where(.test-page) [dir=rtl] :where(input):not([type=checkbox],[type=radio],[type=range],[type=file])[type=search]{background-position:center right 1.125rem}:where(.test-page) [dir=rtl] :where(input):not([type=checkbox],[type=radio],[type=range],[type=file])[type=search][aria-invalid]{background-position:center right 1.125rem,center left .75rem}:where(.test-page) details{display:block;margin-bottom:var(--pico-spacing)}:where(.test-page) details summary{line-height:1rem;list-style-type:none;cursor:pointer;transition:color var(--pico-transition)}:where(.test-page) details summary:not([role]){color:var(--pico-accordion-close-summary-color)}:where(.test-page) details summary::-webkit-details-marker{display:none}:where(.test-page) details summary::marker{display:none}:where(.test-page) details summary::-moz-list-bullet{list-style-type:none}:where(.test-page) details summary::after{display:block;width:1rem;height:1rem;margin-inline-start:calc(var(--pico-spacing,1rem) * .5);float:right;transform:rotate(-90deg);background-image:var(--pico-icon-chevron);background-position:right center;background-size:1rem auto;background-repeat:no-repeat;content:"";transition:transform var(--pico-transition)}:where(.test-page) details summary:focus{outline:0}:where(.test-page) details summary:focus:not([role]){color:var(--pico-accordion-active-summary-color)}:where(.test-page) details summary:focus-visible:not([role]){outline:var(--pico-outline-width) solid var(--pico-primary-focus);outline-offset:calc(var(--pico-spacing,1rem) * 0.5);color:var(--pico-primary)}:where(.test-page) details summary[role=button]{width:100%;text-align:left}:where(.test-page) details summary[role=button]::after{height:calc(1rem * var(--pico-line-height,1.5))}:where(.test-page) details[open]>summary{margin-bottom:var(--pico-spacing)}:where(.test-page) details[open]>summary:not([role]):not(:focus){color:var(--pico-accordion-open-summary-color)}:where(.test-page) details[open]>summary::after{transform:rotate(0)}:where(.test-page) [dir=rtl] details summary{text-align:right}:where(.test-page) [dir=rtl] details summary::after{float:left;background-position:left center}:where(.test-page) article{margin-bottom:var(--pico-block-spacing-vertical);padding:var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);border-radius:var(--pico-border-radius);background:var(--pico-card-background-color);box-shadow:var(--pico-card-box-shadow)}:where(.test-page) article>footer, :where(.test-page) article>header{margin-right:calc(var(--pico-block-spacing-horizontal) * -1);margin-left:calc(var(--pico-block-spacing-horizontal) * -1);padding:calc(var(--pico-block-spacing-vertical) * .66) var(--pico-block-spacing-horizontal);background-color:var(--pico-card-sectioning-background-color)}:where(.test-page) article>header{margin-top:calc(var(--pico-block-spacing-vertical) * -1);margin-bottom:var(--pico-block-spacing-vertical);border-bottom:var(--pico-border-width) solid var(--pico-card-border-color);border-top-right-radius:var(--pico-border-radius);border-top-left-radius:var(--pico-border-radius)}:where(.test-page) article>footer{margin-top:var(--pico-block-spacing-vertical);margin-bottom:calc(var(--pico-block-spacing-vertical) * -1);border-top:var(--pico-border-width) solid var(--pico-card-border-color);border-bottom-right-radius:var(--pico-border-radius);border-bottom-left-radius:var(--pico-border-radius)}:where(.test-page) details.dropdown{position:relative;border-bottom:none}:where(.test-page) details.dropdown summary::after, :where(.test-page) details.dropdown>a::after, :where(.test-page) details.dropdown>button::after{display:block;width:1rem;height:calc(1rem * var(--pico-line-height,1.5));margin-inline-start:.25rem;float:right;transform:rotate(0) translateX(.2rem);background-image:var(--pico-icon-chevron);background-position:right center;background-size:1rem auto;background-repeat:no-repeat;content:""}:where(.test-page) nav details.dropdown{margin-bottom:0}:where(.test-page) details.dropdown summary:not([role]){height:calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);padding:var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);border:var(--pico-border-width) solid var(--pico-form-element-border-color);border-radius:var(--pico-border-radius);background-color:var(--pico-form-element-background-color);color:var(--pico-form-element-placeholder-color);line-height:inherit;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:background-color var(--pico-transition),border-color var(--pico-transition),color var(--pico-transition),box-shadow var(--pico-transition)}:where(.test-page) details.dropdown summary:not([role]):active, :where(.test-page) details.dropdown summary:not([role]):focus{border-color:var(--pico-form-element-active-border-color);background-color:var(--pico-form-element-active-background-color)}:where(.test-page) details.dropdown summary:not([role]):focus{box-shadow:0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color)}:where(.test-page) details.dropdown summary:not([role]):focus-visible{outline:0}:where(.test-page) details.dropdown summary:not([role])[aria-invalid=false]{--pico-form-element-border-color:var(--pico-form-element-valid-border-color);--pico-form-element-active-border-color:var(--pico-form-element-valid-focus-color);--pico-form-element-focus-color:var(--pico-form-element-valid-focus-color)}:where(.test-page) details.dropdown summary:not([role])[aria-invalid=true]{--pico-form-element-border-color:var(--pico-form-element-invalid-border-color);--pico-form-element-active-border-color:var(--pico-form-element-invalid-focus-color);--pico-form-element-focus-color:var(--pico-form-element-invalid-focus-color)}:where(.test-page) nav details.dropdown{display:inline;margin:calc(var(--pico-nav-element-spacing-vertical) * -1) 0}:where(.test-page) nav details.dropdown summary::after{transform:rotate(0) translateX(0)}:where(.test-page) nav details.dropdown summary:not([role]){height:calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);padding:calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal)}:where(.test-page) nav details.dropdown summary:not([role]):focus-visible{box-shadow:0 0 0 var(--pico-outline-width) var(--pico-primary-focus)}:where(.test-page) details.dropdown summary+ul{display:flex;z-index:99;position:absolute;left:0;flex-direction:column;width:100%;min-width:-moz-fit-content;min-width:fit-content;margin:0;margin-top:var(--pico-outline-width);padding:0;border:var(--pico-border-width) solid var(--pico-dropdown-border-color);border-radius:var(--pico-border-radius);background-color:var(--pico-dropdown-background-color);box-shadow:var(--pico-dropdown-box-shadow);color:var(--pico-dropdown-color);white-space:nowrap;opacity:0;transition:opacity var(--pico-transition),transform 0s ease-in-out 1s}:where(.test-page) details.dropdown summary+ul[dir=rtl]{right:0;left:auto}:where(.test-page) details.dropdown summary+ul li{width:100%;margin-bottom:0;padding:calc(var(--pico-form-element-spacing-vertical) * .5) var(--pico-form-element-spacing-horizontal);list-style:none}:where(.test-page) details.dropdown summary+ul li:first-of-type{margin-top:calc(var(--pico-form-element-spacing-vertical) * .5)}:where(.test-page) details.dropdown summary+ul li:last-of-type{margin-bottom:calc(var(--pico-form-element-spacing-vertical) * .5)}:where(.test-page) details.dropdown summary+ul li a{display:block;margin:calc(var(--pico-form-element-spacing-vertical) * -.5) calc(var(--pico-form-element-spacing-horizontal) * -1);padding:calc(var(--pico-form-element-spacing-vertical) * .5) var(--pico-form-element-spacing-horizontal);overflow:hidden;border-radius:0;color:var(--pico-dropdown-color);text-decoration:none;text-overflow:ellipsis}:where(.test-page) details.dropdown summary+ul li a:active, :where(.test-page) details.dropdown summary+ul li a:focus, :where(.test-page) details.dropdown summary+ul li a:focus-visible, :where(.test-page) details.dropdown summary+ul li a:hover, :where(.test-page) details.dropdown summary+ul li a[aria-current]:not([aria-current=false]){background-color:var(--pico-dropdown-hover-background-color)}:where(.test-page) details.dropdown summary+ul li label{width:100%}:where(.test-page) details.dropdown summary+ul li:has(label):hover{background-color:var(--pico-dropdown-hover-background-color)}:where(.test-page) details.dropdown[open] summary{margin-bottom:0}:where(.test-page) details.dropdown[open] summary+ul{transform:scaleY(1);opacity:1;transition:opacity var(--pico-transition),transform 0s ease-in-out 0s}:where(.test-page) details.dropdown[open] summary::before{display:block;z-index:1;position:fixed;width:100vw;height:100vh;inset:0;background:0 0;content:"";cursor:default}:where(.test-page) label>details.dropdown{margin-top:calc(var(--pico-spacing) * .25)}:where(.test-page) [role=group], :where(.test-page) [role=search]{display:inline-flex;position:relative;width:100%;margin-bottom:var(--pico-spacing);border-radius:var(--pico-border-radius);box-shadow:var(--pico-group-box-shadow,0 0 0 transparent);vertical-align:middle;transition:box-shadow var(--pico-transition)}:where(.test-page) [role=group] input:not([type=checkbox],[type=radio]), :where(.test-page) [role=group] select, :where(.test-page) [role=group]>*, :where(.test-page) [role=search] input:not([type=checkbox],[type=radio]), :where(.test-page) [role=search] select, :where(.test-page) [role=search]>*{position:relative;flex:1 1 auto;margin-bottom:0}:where(.test-page) [role=group] input:not([type=checkbox],[type=radio]):not(:first-child), :where(.test-page) [role=group] select:not(:first-child), :where(.test-page) [role=group]>:not(:first-child), :where(.test-page) [role=search] input:not([type=checkbox],[type=radio]):not(:first-child), :where(.test-page) [role=search] select:not(:first-child), :where(.test-page) [role=search]>:not(:first-child){margin-left:0;border-top-left-radius:0;border-bottom-left-radius:0}:where(.test-page) [role=group] input:not([type=checkbox],[type=radio]):not(:last-child), :where(.test-page) [role=group] select:not(:last-child), :where(.test-page) [role=group]>:not(:last-child), :where(.test-page) [role=search] input:not([type=checkbox],[type=radio]):not(:last-child), :where(.test-page) [role=search] select:not(:last-child), :where(.test-page) [role=search]>:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}:where(.test-page) [role=group] input:not([type=checkbox],[type=radio]):focus, :where(.test-page) [role=group] select:focus, :where(.test-page) [role=group]>:focus, :where(.test-page) [role=search] input:not([type=checkbox],[type=radio]):focus, :where(.test-page) [role=search] select:focus, :where(.test-page) [role=search]>:focus{z-index:2}:where(.test-page) [role=group] [role=button]:not(:first-child), :where(.test-page) [role=group] [type=button]:not(:first-child), :where(.test-page) [role=group] [type=reset]:not(:first-child), :where(.test-page) [role=group] [type=submit]:not(:first-child), :where(.test-page) [role=group] button:not(:first-child), :where(.test-page) [role=group] input:not([type=checkbox],[type=radio]):not(:first-child), :where(.test-page) [role=group] select:not(:first-child), :where(.test-page) [role=search] [role=button]:not(:first-child), :where(.test-page) [role=search] [type=button]:not(:first-child), :where(.test-page) [role=search] [type=reset]:not(:first-child), :where(.test-page) [role=search] [type=submit]:not(:first-child), :where(.test-page) [role=search] button:not(:first-child), :where(.test-page) [role=search] input:not([type=checkbox],[type=radio]):not(:first-child), :where(.test-page) [role=search] select:not(:first-child){margin-left:calc(var(--pico-border-width) * -1)}:where(.test-page) [role=group] [role=button], :where(.test-page) [role=group] [type=button], :where(.test-page) [role=group] [type=reset], :where(.test-page) [role=group] [type=submit], :where(.test-page) [role=group] button, :where(.test-page) [role=search] [role=button], :where(.test-page) [role=search] [type=button], :where(.test-page) [role=search] [type=reset], :where(.test-page) [role=search] [type=submit], :where(.test-page) [role=search] button{width:auto}@supports selector(:has(*)){:where(.test-page) [role=group]:has(button:focus,[type=submit]:focus,[type=button]:focus,[role=button]:focus), :where(.test-page) [role=search]:has(button:focus,[type=submit]:focus,[type=button]:focus,[role=button]:focus){--pico-group-box-shadow:var(--pico-group-box-shadow-focus-with-button)}:where(.test-page) [role=group]:has(button:focus,[type=submit]:focus,[type=button]:focus,[role=button]:focus) input:not([type=checkbox],[type=radio]), :where(.test-page) [role=group]:has(button:focus,[type=submit]:focus,[type=button]:focus,[role=button]:focus) select, :where(.test-page) [role=search]:has(button:focus,[type=submit]:focus,[type=button]:focus,[role=button]:focus) input:not([type=checkbox],[type=radio]), :where(.test-page) [role=search]:has(button:focus,[type=submit]:focus,[type=button]:focus,[role=button]:focus) select{border-color:transparent}:where(.test-page) [role=group]:has(input:not([type=submit],[type=button]):focus,select:focus), :where(.test-page) [role=search]:has(input:not([type=submit],[type=button]):focus,select:focus){--pico-group-box-shadow:var(--pico-group-box-shadow-focus-with-input)}:where(.test-page) [role=group]:has(input:not([type=submit],[type=button]):focus,select:focus) [role=button], :where(.test-page) [role=group]:has(input:not([type=submit],[type=button]):focus,select:focus) [type=button], :where(.test-page) [role=group]:has(input:not([type=submit],[type=button]):focus,select:focus) [type=submit], :where(.test-page) [role=group]:has(input:not([type=submit],[type=button]):focus,select:focus) button, :where(.test-page) [role=search]:has(input:not([type=submit],[type=button]):focus,select:focus) [role=button], :where(.test-page) [role=search]:has(input:not([type=submit],[type=button]):focus,select:focus) [type=button], :where(.test-page) [role=search]:has(input:not([type=submit],[type=button]):focus,select:focus) [type=submit], :where(.test-page) [role=search]:has(input:not([type=submit],[type=button]):focus,select:focus) button{--pico-button-box-shadow:0 0 0 var(--pico-border-width) var(--pico-primary-border);--pico-button-hover-box-shadow:0 0 0 var(--pico-border-width) var(--pico-primary-hover-border)}:where(.test-page) [role=group] [role=button]:focus, :where(.test-page) [role=group] [type=button]:focus, :where(.test-page) [role=group] [type=reset]:focus, :where(.test-page) [role=group] [type=submit]:focus, :where(.test-page) [role=group] button:focus, :where(.test-page) [role=search] [role=button]:focus, :where(.test-page) [role=search] [type=button]:focus, :where(.test-page) [role=search] [type=reset]:focus, :where(.test-page) [role=search] [type=submit]:focus, :where(.test-page) [role=search] button:focus{box-shadow:none}}:where(.test-page) [role=search]>:first-child{border-top-left-radius:5rem;border-bottom-left-radius:5rem}:where(.test-page) [role=search]>:last-child{border-top-right-radius:5rem;border-bottom-right-radius:5rem}:where(.test-page) [aria-busy=true]:not(input,select,textarea,html){white-space:nowrap}:where(.test-page) [aria-busy=true]:not(input,select,textarea,html)::before{display:inline-block;width:1em;height:1em;background-image:var(--pico-icon-loading);background-size:1em auto;background-repeat:no-repeat;content:"";vertical-align:-.125em}:where(.test-page) [aria-busy=true]:not(input,select,textarea,html):not(:empty)::before{margin-inline-end:calc(var(--pico-spacing) * .5)}:where(.test-page) [aria-busy=true]:not(input,select,textarea,html):empty{text-align:center}:where(.test-page) [role=button][aria-busy=true], :where(.test-page) [type=button][aria-busy=true], :where(.test-page) [type=reset][aria-busy=true], :where(.test-page) [type=submit][aria-busy=true], :where(.test-page) a[aria-busy=true], :where(.test-page) button[aria-busy=true]{pointer-events:none}.test-page{--pico-scrollbar-width:0px}:where(.test-page) dialog{display:flex;z-index:999;position:fixed;top:0;right:0;bottom:0;left:0;align-items:center;justify-content:center;width:inherit;min-width:100%;height:inherit;min-height:100%;padding:0;border:0;-webkit-backdrop-filter:var(--pico-modal-overlay-backdrop-filter);backdrop-filter:var(--pico-modal-overlay-backdrop-filter);background-color:var(--pico-modal-overlay-background-color);color:var(--pico-color)}:where(.test-page) dialog article{width:100%;max-height:calc(100vh - var(--pico-spacing) * 2);margin:var(--pico-spacing);overflow:auto}@media (min-width:576px){:where(.test-page) dialog article{max-width:510px}}@media (min-width:768px){:where(.test-page) dialog article{max-width:700px}}:where(.test-page) dialog article>header>*{margin-bottom:0}:where(.test-page) dialog article>header .close, :where(.test-page) dialog article>header :is(a,button)[rel=prev]{margin:0;margin-left:var(--pico-spacing);padding:0;float:right}:where(.test-page) dialog article>footer{text-align:right}:where(.test-page) dialog article>footer [role=button], :where(.test-page) dialog article>footer button{margin-bottom:0}:where(.test-page) dialog article>footer [role=button]:not(:first-of-type), :where(.test-page) dialog article>footer button:not(:first-of-type){margin-left:calc(var(--pico-spacing) * .5)}:where(.test-page) dialog article .close, :where(.test-page) dialog article :is(a,button)[rel=prev]{display:block;width:1rem;height:1rem;margin-top:calc(var(--pico-spacing) * -1);margin-bottom:var(--pico-spacing);margin-left:auto;border:none;background-image:var(--pico-icon-close);background-position:center;background-size:auto 1rem;background-repeat:no-repeat;background-color:transparent;opacity:.5;transition:opacity var(--pico-transition)}:where(.test-page) dialog article .close:is([aria-current]:not([aria-current=false]),:hover,:active,:focus), :where(.test-page) dialog article :is(a,button)[rel=prev]:is([aria-current]:not([aria-current=false]),:hover,:active,:focus){opacity:1}:where(.test-page) dialog:not([open]), :where(.test-page) dialog[open=false]{display:none}:where(.test-page) .modal-is-open{padding-right:var(--pico-scrollbar-width,0);overflow:hidden;pointer-events:none;touch-action:none}:where(.test-page) .modal-is-open dialog{pointer-events:auto;touch-action:auto}:where(.test-page) :where(.modal-is-opening,.modal-is-closing) dialog, :where(.test-page) :where(.modal-is-opening,.modal-is-closing) dialog>article{animation-duration:.2s;animation-timing-function:ease-in-out;animation-fill-mode:both}:where(.test-page) :where(.modal-is-opening,.modal-is-closing) dialog{animation-duration:.8s;animation-name:modal-overlay}:where(.test-page) :where(.modal-is-opening,.modal-is-closing) dialog>article{animation-delay:.2s;animation-name:modal}:where(.test-page) .modal-is-closing dialog, :where(.test-page) .modal-is-closing dialog>article{animation-delay:0s;animation-direction:reverse}@keyframes modal-overlay{from{-webkit-backdrop-filter:none;backdrop-filter:none;background-color:transparent}}@keyframes modal{from{transform:translateY(-100%);opacity:0}}:where(.test-page) :where(nav li)::before{float:left;content:"​"}:where(.test-page) nav, :where(.test-page) nav ul{display:flex}:where(.test-page) nav{justify-content:space-between;overflow:visible}:where(.test-page) nav ol, :where(.test-page) nav ul{align-items:center;margin-bottom:0;padding:0;list-style:none}:where(.test-page) nav ol:first-of-type, :where(.test-page) nav ul:first-of-type{margin-left:calc(var(--pico-nav-element-spacing-horizontal) * -1)}:where(.test-page) nav ol:last-of-type, :where(.test-page) nav ul:last-of-type{margin-right:calc(var(--pico-nav-element-spacing-horizontal) * -1)}:where(.test-page) nav li{display:inline-block;margin:0;padding:var(--pico-nav-element-spacing-vertical) var(--pico-nav-element-spacing-horizontal)}:where(.test-page) nav li :where(a,[role=link]){display:inline-block;margin:calc(var(--pico-nav-link-spacing-vertical) * -1) calc(var(--pico-nav-link-spacing-horizontal) * -1);padding:var(--pico-nav-link-spacing-vertical) var(--pico-nav-link-spacing-horizontal);border-radius:var(--pico-border-radius)}:where(.test-page) nav li :where(a,[role=link]):not(:hover){text-decoration:none}:where(.test-page) nav li [role=button], :where(.test-page) nav li [type=button], :where(.test-page) nav li button, :where(.test-page) nav li input:not([type=checkbox],[type=radio],[type=range],[type=file]), :where(.test-page) nav li select{height:auto;margin-right:inherit;margin-bottom:0;margin-left:inherit;padding:calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal)}:where(.test-page) nav[aria-label=breadcrumb]{align-items:center;justify-content:start}:where(.test-page) nav[aria-label=breadcrumb] ul li:not(:first-child){margin-inline-start:var(--pico-nav-link-spacing-horizontal)}:where(.test-page) nav[aria-label=breadcrumb] ul li a{margin:calc(var(--pico-nav-link-spacing-vertical) * -1) 0;margin-inline-start:calc(var(--pico-nav-link-spacing-horizontal) * -1)}:where(.test-page) nav[aria-label=breadcrumb] ul li:not(:last-child)::after{display:inline-block;position:absolute;width:calc(var(--pico-nav-link-spacing-horizontal) * 4);margin:0 calc(var(--pico-nav-link-spacing-horizontal) * -1);content:var(--pico-nav-breadcrumb-divider);color:var(--pico-muted-color);text-align:center;text-decoration:none;white-space:nowrap}:where(.test-page) nav[aria-label=breadcrumb] a[aria-current]:not([aria-current=false]){background-color:transparent;color:inherit;text-decoration:none;pointer-events:none}:where(.test-page) aside li, :where(.test-page) aside nav, :where(.test-page) aside ol, :where(.test-page) aside ul{display:block}:where(.test-page) aside li{padding:calc(var(--pico-nav-element-spacing-vertical) * .5) var(--pico-nav-element-spacing-horizontal)}:where(.test-page) aside li a{display:block}:where(.test-page) aside li [role=button]{margin:inherit}:where(.test-page) [dir=rtl] nav[aria-label=breadcrumb] ul li:not(:last-child) ::after{content:"\\"}:where(.test-page) progress{display:inline-block;vertical-align:baseline}:where(.test-page) progress{-webkit-appearance:none;-moz-appearance:none;display:inline-block;appearance:none;width:100%;height:.5rem;margin-bottom:calc(var(--pico-spacing) * .5);overflow:hidden;border:0;border-radius:var(--pico-border-radius);background-color:var(--pico-progress-background-color);color:var(--pico-progress-color)}:where(.test-page) progress::-webkit-progress-bar{border-radius:var(--pico-border-radius);background:0 0}:where(.test-page) progress[value]::-webkit-progress-value{background-color:var(--pico-progress-color);-webkit-transition:inline-size var(--pico-transition);transition:inline-size var(--pico-transition)}:where(.test-page) progress::-moz-progress-bar{background-color:var(--pico-progress-color)}@media (prefers-reduced-motion:no-preference){:where(.test-page) progress:indeterminate{background:var(--pico-progress-background-color) linear-gradient(to right,var(--pico-progress-color) 30%,var(--pico-progress-background-color) 30%) top left/150% 150% no-repeat;animation:progress-indeterminate 1s linear infinite}:where(.test-page) progress:indeterminate[value]::-webkit-progress-value{background-color:transparent}:where(.test-page) progress:indeterminate::-moz-progress-bar{background-color:transparent}}@media (prefers-reduced-motion:no-preference){:where(.test-page) [dir=rtl] progress:indeterminate{animation-direction:reverse}}@keyframes progress-indeterminate{0%{background-position:200% 0}100%{background-position:-200% 0}}:where(.test-page) [data-tooltip]{position:relative}:where(.test-page) [data-tooltip]:not(a,button,input){border-bottom:1px dotted;text-decoration:none;cursor:help}:where(.test-page) [data-tooltip]::after, :where(.test-page) [data-tooltip]::before, :where(.test-page) [data-tooltip][data-placement=top]::after, :where(.test-page) [data-tooltip][data-placement=top]::before{display:block;z-index:99;position:absolute;bottom:100%;left:50%;padding:.25rem .5rem;overflow:hidden;transform:translate(-50%,-.25rem);border-radius:var(--pico-border-radius);background:var(--pico-tooltip-background-color);content:attr(data-tooltip);color:var(--pico-tooltip-color);font-style:normal;font-weight:var(--pico-font-weight);font-size:.875rem;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;opacity:0;pointer-events:none}:where(.test-page) [data-tooltip]::after, :where(.test-page) [data-tooltip][data-placement=top]::after{padding:0;transform:translate(-50%,0);border-top:.3rem solid;border-right:.3rem solid transparent;border-left:.3rem solid transparent;border-radius:0;background-color:transparent;content:"";color:var(--pico-tooltip-background-color)}:where(.test-page) [data-tooltip][data-placement=bottom]::after, :where(.test-page) [data-tooltip][data-placement=bottom]::before{top:100%;bottom:auto;transform:translate(-50%,.25rem)}:where(.test-page) [data-tooltip][data-placement=bottom]:after{transform:translate(-50%,-.3rem);border:.3rem solid transparent;border-bottom:.3rem solid}:where(.test-page) [data-tooltip][data-placement=left]::after, :where(.test-page) [data-tooltip][data-placement=left]::before{top:50%;right:100%;bottom:auto;left:auto;transform:translate(-.25rem,-50%)}:where(.test-page) [data-tooltip][data-placement=left]:after{transform:translate(.3rem,-50%);border:.3rem solid transparent;border-left:.3rem solid}:where(.test-page) [data-tooltip][data-placement=right]::after, :where(.test-page) [data-tooltip][data-placement=right]::before{top:50%;right:auto;bottom:auto;left:100%;transform:translate(.25rem,-50%)}:where(.test-page) [data-tooltip][data-placement=right]:after{transform:translate(-.3rem,-50%);border:.3rem solid transparent;border-right:.3rem solid}:where(.test-page) [data-tooltip]:focus::after, :where(.test-page) [data-tooltip]:focus::before, :where(.test-page) [data-tooltip]:hover::after, :where(.test-page) [data-tooltip]:hover::before{opacity:1}@media (hover:hover) and (pointer:fine){:where(.test-page) [data-tooltip]:focus::after, :where(.test-page) [data-tooltip]:focus::before, :where(.test-page) [data-tooltip]:hover::after, :where(.test-page) [data-tooltip]:hover::before{--pico-tooltip-slide-to:translate(-50%, -0.25rem);transform:translate(-50%,.75rem);animation-duration:.2s;animation-fill-mode:forwards;animation-name:tooltip-slide;opacity:0}:where(.test-page) [data-tooltip]:focus::after, :where(.test-page) [data-tooltip]:hover::after{--pico-tooltip-caret-slide-to:translate(-50%, 0rem);transform:translate(-50%,-.25rem);animation-name:tooltip-caret-slide}:where(.test-page) [data-tooltip][data-placement=bottom]:focus::after, :where(.test-page) [data-tooltip][data-placement=bottom]:focus::before, :where(.test-page) [data-tooltip][data-placement=bottom]:hover::after, :where(.test-page) [data-tooltip][data-placement=bottom]:hover::before{--pico-tooltip-slide-to:translate(-50%, 0.25rem);transform:translate(-50%,-.75rem);animation-name:tooltip-slide}:where(.test-page) [data-tooltip][data-placement=bottom]:focus::after, :where(.test-page) [data-tooltip][data-placement=bottom]:hover::after{--pico-tooltip-caret-slide-to:translate(-50%, -0.3rem);transform:translate(-50%,-.5rem);animation-name:tooltip-caret-slide}:where(.test-page) [data-tooltip][data-placement=left]:focus::after, :where(.test-page) [data-tooltip][data-placement=left]:focus::before, :where(.test-page) [data-tooltip][data-placement=left]:hover::after, :where(.test-page) [data-tooltip][data-placement=left]:hover::before{--pico-tooltip-slide-to:translate(-0.25rem, -50%);transform:translate(.75rem,-50%);animation-name:tooltip-slide}:where(.test-page) [data-tooltip][data-placement=left]:focus::after, :where(.test-page) [data-tooltip][data-placement=left]:hover::after{--pico-tooltip-caret-slide-to:translate(0.3rem, -50%);transform:translate(.05rem,-50%);animation-name:tooltip-caret-slide}:where(.test-page) [data-tooltip][data-placement=right]:focus::after, :where(.test-page) [data-tooltip][data-placement=right]:focus::before, :where(.test-page) [data-tooltip][data-placement=right]:hover::after, :where(.test-page) [data-tooltip][data-placement=right]:hover::before{--pico-tooltip-slide-to:translate(0.25rem, -50%);transform:translate(-.75rem,-50%);animation-name:tooltip-slide}:where(.test-page) [data-tooltip][data-placement=right]:focus::after, :where(.test-page) [data-tooltip][data-placement=right]:hover::after{--pico-tooltip-caret-slide-to:translate(-0.3rem, -50%);transform:translate(-.05rem,-50%);animation-name:tooltip-caret-slide}}@keyframes tooltip-slide{to{transform:var(--pico-tooltip-slide-to);opacity:1}}@keyframes tooltip-caret-slide{50%{opacity:0}to{transform:var(--pico-tooltip-caret-slide-to);opacity:1}}:where(.test-page) [aria-controls]{cursor:pointer}:where(.test-page) [aria-disabled=true], :where(.test-page) [disabled]{cursor:not-allowed}:where(.test-page) [aria-hidden=false][hidden]{display:initial}:where(.test-page) [aria-hidden=false][hidden]:not(:focus){clip:rect(0,0,0,0);position:absolute}:where(.test-page) [tabindex], :where(.test-page) a, :where(.test-page) area, :where(.test-page) button, :where(.test-page) input, :where(.test-page) label, :where(.test-page) select, :where(.test-page) summary, :where(.test-page) textarea{-ms-touch-action:manipulation}:where(.test-page) [dir=rtl]{direction:rtl}@media (prefers-reduced-motion:reduce){:where(.test-page) :not([aria-busy=true]), :where(.test-page) :not([aria-busy=true])::after, :where(.test-page) :not([aria-busy=true])::before{background-attachment:initial!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:0s!important}}
/* Общее оформление ---------------------------------------------------------
   Всё, что нужно любой странице: фон, слои глубины, шапка с меню, мелкие
   утилиты и страница ошибки. Палитра тем – в themes.css, страничные стили –
   в test.css, admin.css и cabinet.css. */

/* Фон --------------------------------------------------------------------- */

/* Фон нужен и на html: у Pico он свой, и на короткой странице ниже контента
   оставалась белая полоса. min-height дотягивает страницу до высоты экрана. */


/* Не задаём ::-webkit-scrollbar { width }: в Blink это включает classic-режим
   и полоса начинает съедать ширину. Цвет – через scrollbar-color. */
:where(.test-page) *{
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--app-text) 38%, transparent) transparent;
}

@supports (overflow: overlay) {
    
}

.test-page{
    min-height: 100dvh;
    color: var(--app-text);
    background-color: var(--app-bg);
    /* Полоса поверх правого края: body шире clientWidth на ширину classic-полосы. */
    margin-right: calc(var(--sb-size, 0px) * -1);
}

/* Глубина на широком экране -----------------------------------------------
   До 1280 px оба слоя не видны: там всё окно и есть колонка с содержимым,
   отделять нечего. Дальше поля по бокам получают свой цвет – не оттенок
   фона страницы, а отдельный, – и по ним разложен рисунок. Колонка с
   содержимым ложится сверху листом с рамкой и тенью.

   Шапку и нижнюю панель эффект не трогает: они остаются полосами во всю
   ширину окна, и поля видны между ними – только по середине страницы.

   Слои фиксированные и с отрицательным z-index: они рисуются над фоном body,
   но под всем содержимым, поэтому ничего не перехватывают и не прокручиваются. */

:where(.test-page) .page-back, :where(.test-page) .page-sheet{ display: none; }

@media (min-width: 1280px) {
    :where(.test-page) .page-back, :where(.test-page) .page-sheet{
        display: block;
        position: fixed;
        pointer-events: none;
    }

    :where(.test-page) .page-back{
        inset: 0;
        z-index: -2;
        background: var(--app-backdrop);
    }

    /* Рисунок на полях – две полосы: левая прибита к левому нижнему углу окна,
       правая к правому нижнему. Размер у них один и тот же всегда: при сужении
       окна полоса не ужимается, а уезжает под лист. Поэтому и mask-size здесь
       нет – маска идёт своим размером, 480 × 1200.

       Файлы подключены маской, а не картинкой: цвет рисунка задаёт тема через
       --app-pattern, иначе на каждую тему понадобился бы свой комплект. Адрес
       относительный – версии в нём нет, такие файлы отдаются с no-cache. */
    :where(.test-page) .page-back-l, :where(.test-page) .page-back-r{
        position: absolute;
        bottom: 0;
        width: 480px;
        height: 1200px;
        background: var(--app-pattern);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
    }
    :where(.test-page) .page-back-l{ left: 0;  -webkit-mask-position: left bottom;  mask-position: left bottom; }
    :where(.test-page) .page-back-r{ right: 0; -webkit-mask-position: right bottom; mask-position: right bottom; }

    /* Какой рисунок показан, решает атрибут на <html>: сервер ставит его по
       cookie, скрипт – сразу при выборе в списке. Клетка объявлена и без
       атрибута: страница без data-bg не должна остаться с полями, залитыми
       сплошным цветом. */
    :where(.test-page) .page-back-l{
        -webkit-mask-image: url("img/bg/grid-l.7ae7dca10d67.svg");
        mask-image: url("img/bg/grid-l.7ae7dca10d67.svg");
    }
    :where(.test-page) .page-back-r{
        -webkit-mask-image: url("img/bg/grid-r.4dd6efb467d1.svg");
        mask-image: url("img/bg/grid-r.4dd6efb467d1.svg");
    }

    :where(.test-page) [data-bg="phonetics"] .page-back-l{
        -webkit-mask-image: url("img/bg/phonetics-l.264e63dba4fb.svg");
        mask-image: url("img/bg/phonetics-l.264e63dba4fb.svg");
    }
    :where(.test-page) [data-bg="phonetics"] .page-back-r{
        -webkit-mask-image: url("img/bg/phonetics-r.cc218ae522d8.svg");
        mask-image: url("img/bg/phonetics-r.cc218ae522d8.svg");
    }

    :where(.test-page) [data-bg="letters"] .page-back-l{
        -webkit-mask-image: url("img/bg/letters-l.7631843dac75.svg");
        mask-image: url("img/bg/letters-l.7631843dac75.svg");
    }
    :where(.test-page) [data-bg="letters"] .page-back-r{
        -webkit-mask-image: url("img/bg/letters-r.d62e5b66aa70.svg");
        mask-image: url("img/bg/letters-r.d62e5b66aa70.svg");
    }

    :where(.test-page) [data-bg="diagonal"] .page-back-l{
        -webkit-mask-image: url("img/bg/diagonal-l.2f7dcd73203b.svg");
        mask-image: url("img/bg/diagonal-l.2f7dcd73203b.svg");
    }
    :where(.test-page) [data-bg="diagonal"] .page-back-r{
        -webkit-mask-image: url("img/bg/diagonal-r.f78bbe823652.svg");
        mask-image: url("img/bg/diagonal-r.f78bbe823652.svg");
    }

    :where(.test-page) [data-bg="blobs"] .page-back-l{
        -webkit-mask-image: url("img/bg/blobs-l.f3364a75361e.svg");
        mask-image: url("img/bg/blobs-l.f3364a75361e.svg");
    }
    :where(.test-page) [data-bg="blobs"] .page-back-r{
        -webkit-mask-image: url("img/bg/blobs-r.320396605f61.svg");
        mask-image: url("img/bg/blobs-r.320396605f61.svg");
    }

    :where(.test-page) [data-bg="skyline"] .page-back-l{
        -webkit-mask-image: url("img/bg/skyline-l.cf68095f3a74.svg");
        mask-image: url("img/bg/skyline-l.cf68095f3a74.svg");
    }
    :where(.test-page) [data-bg="skyline"] .page-back-r{
        -webkit-mask-image: url("img/bg/skyline-r.70196eb84a49.svg");
        mask-image: url("img/bg/skyline-r.70196eb84a49.svg");
    }

    /* Фон body убираем: он рисуется поверх слоёв с отрицательным z-index
       (порядок отрисовки: фон корня, затем отрицательные слои, и только потом
       фоны обычных блоков) и просто закрывал бы подложку. Цвет холста при
       этом остаётся на html. */
    .test-page:has(.page-back){ background-color: transparent; }

    :where(.test-page) .page-sheet{
        inset: 0;
        z-index: -1;
    }
    /* Явные края листа: рамка по бокам плюс тень, иначе на глаз непонятно,
       где кончается страница и начинается то, что за ней. */
    :where(.test-page) .page-sheet > .container{
        height: 100%;
        background: var(--app-bg);
        border-left: 1px solid var(--app-border);
        border-right: 1px solid var(--app-border);
        box-shadow: 0 0 5rem rgb(0 0 0 / 45%);
    }
}

/* Колонка содержимого ------------------------------------------------------
   Отступ по бокам один на всё приложение: шапка, содержимое и «лист» на
   широком экране используют один и тот же .container, и развести их по разным
   вертикалям нельзя – бренд разъедется с карточками под ним.

   Рамка листа стоит по внешнему краю контейнера, поэтому она не двигается:
   двигается только содержимое, отлипая от края. */
:where(.test-page) .container{
    padding-inline: var(--app-gap-m);
}
@media (min-width: 48rem) {
    :where(.test-page) .container{ padding-inline: var(--app-gap-xl); }
}

/* Шапка ------------------------------------------------------------------- */

:where(.test-page) .app-header{
    position: sticky;
    top: 0;
    z-index: 10;
    padding: .5rem 0 .6rem;
    margin-bottom: .8rem;
    color: var(--app-header-text);
    background: var(--app-header-bg);
    border-bottom: 1px solid var(--app-border);
    box-shadow: 0 1px 4px rgb(0 0 0 / 8%);
}
/* Первая строка шапки: бренд слева, навигация страницы по центру, меню справа.
   Навигация с автоотступами по бокам сама встаёт посередине между ними, и её
   ширину не нужно ниоткуда знать.

   Строка одна: при нехватке места ужимается название курса – оно длинное и
   переживёт многоточие, а вкладки и аватар переносить некуда. Ломается строка
   на телефоне и на планшете, где вкладки уезжают вниз целиком.

   Порог 61rem – та ширина, ниже которой курс, четыре вкладки и меню в одну
   строку помещаются только сжатыми: планшет вертикально (768–834 px) попадал
   в неё целиком и выглядел слипшимся. Прежние 48rem отпускали ровно 768 и ни
   пикселем больше. */
:where(.test-page) .app-header-inner{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .5rem .8rem;
}
@media (max-width: 61rem) {
    :where(.test-page) .app-header-inner{ flex-wrap: wrap; }
    /* Строка переносится – место есть: название курса показывается целиком, а
       не обрезком в полстроки. */
    :where(.test-page) .course-switch{ min-width: 14rem; }
}
:where(.test-page) .app-header h1, :where(.test-page) .app-header .brand{
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.25;
    color: var(--app-header-text);
}
:where(.test-page) .app-header .brand{ font-weight: 700; text-decoration: none; }

:where(.test-page) .app-header-nav{
    display: flex;
    flex: 0 0 auto;
    gap: .2rem;
    margin: 0 auto;
}

:where(.test-page) .tab{
    padding: .45rem .9rem;
    color: var(--app-muted);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    border-radius: var(--app-radius) var(--app-radius) 0 0;
}
:where(.test-page) .tab:hover{ color: var(--app-text); background: var(--app-surface-2); }
:where(.test-page) .tab-on{
    font-weight: 600;
    color: var(--app-accent);
    border-bottom-color: var(--app-accent);
}
:where(.test-page) .tab-on:hover{ background: transparent; }

/* На телефоне и на планшете вкладки уезжают на вторую строку во всю ширину и
   прокручиваются пальцем: втискивать четыре раздела рядом с брендом и
   аватаром некуда. Порог тот же, что у переноса строки шапки. */
@media (max-width: 61rem) {
    :where(.test-page) .app-header-nav{
        order: 3;
        width: 100%;
        margin: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }
    :where(.test-page) .app-header-nav::-webkit-scrollbar{ display: none; }
}

/* Переключатель курсов – такой же выпадающий список, как меню справа: та же
   кнопка с рамкой и та же панель. Фон и рамку, которые Pico рисует у dropdown,
   мы больше не снимаем: без них выбор курса читался как заголовок страницы,
   и что по нему можно нажать, было видно только по галочке.

   Ширину задаём явно: у dropdown в Pico она 100 %, и в шапке он вытеснял бы
   меню на вторую строку. */
/* Сжиматься селектор обязан: имя ученика в меню справа длины неизвестной, и
   без права ужаться название курса выдавливало бы строку шапки за край окна.
   Минимальная ширина есть только там, где вкладки и так уехали на свою строку
   и место освободилось, – см. медиазапрос ниже. */
:where(.test-page) .course-switch{ flex: 0 1 auto; width: auto; max-width: 16rem; margin: 0; min-width: 0; }
/* Селектор повторяет форму правила Pico для dropdown: у него та же
   специфичность, и без :not([role]) наши отступы проиграли бы. */
:where(.test-page) details.course-switch > summary:not([role]){
    position: relative;
    /* Справа – место под галочку: она вынута из потока, см. ниже. */
    padding-right: 2.2rem;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--app-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Галочку Pico рисует плавающей вправо – в блоке с обрезанным текстом она
   уезжает на вторую строку. Прижимаем её к правому краю.

   По вертикали центрируем отступом в половину её высоты, а не через
   transform: у Pico на этой же галочке свой transform, он поворачивает её при
   раскрытии списка. Высота считается его же формулой. Иначе галочка курса
   стояла ниже галочки меню, где та центрируется флексом. */
:where(.test-page) details.course-switch > summary::after{
    position: absolute;
    right: .75rem;
    top: 50%;
    margin: calc(-.5rem * var(--pico-line-height, 1.5)) 0 0;
    float: none;
}
/* Список курсов шире кнопки: название курса в кнопке обрезано, а в списке
   его нужно прочитать целиком. */
:where(.test-page) details.course-switch > summary + ul{
    width: max-content;
    min-width: 100%;
    max-width: min(22rem, calc(100vw - 2rem));
}
:where(.test-page) details.course-switch > summary + ul li{ list-style: none; }

/* Вторая строка: прогресс и свёрнутое описание теста. */
:where(.test-page) .app-header-sub{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .8rem;
    margin-top: .2rem;
}

/* Основа флекса нулевая, а не auto: с auto длинное название теста требовало
   всю ширину строки и на телефоне выдавливало кнопку меню на вторую строку.
   С нулевой основой заголовок довольствуется остатком строки и обрезается
   многоточием по двум строкам – меню остаётся рядом. */
:where(.test-page) .test-title{
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
:where(.test-page) .test-progress{
    flex: 0 0 auto;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    color: var(--app-muted);
    white-space: nowrap;
}
/* Прижато вправо и в одиночку: у теста, который прячет итог, счётчика
   «отвечено» слева нет, и space-between увёл бы «О тесте» влево. */
:where(.test-page) .about{
    position: relative;
    margin: 0 0 0 auto;
    font-size: 1rem;
}
/* Как раньше: просто текст со стрелочкой, без кнопки Pico. */
:where(.test-page) .about > summary{
    width: auto;
    margin: 0;
    padding: 0;
    font: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: var(--app-muted);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
}
:where(.test-page) .about > summary:hover, :where(.test-page) .about > summary:focus, :where(.test-page) .about > summary:focus-visible{
    color: var(--app-text);
    background: transparent;
    border: 0;
    box-shadow: none;
    outline: 0;
}
/* Pico даёт открытому summary нижний отступ под текст аккордеона.
   Плашка и так вне потока, а отступ раздвигал шапку. */
:where(.test-page) .about[open] > summary{ margin-bottom: 0; }
/* Содержимое <details> в Хроме лежит в отдельном блоке и остаётся в потоке,
   даже если сама плашка абсолютная: из-за этого шапка росла по высоте.
   Блок вынут из потока, плашка внутри него обычная. */
:where(.test-page) .about::details-content{
    position: absolute;
    z-index: 20;
    right: 0;
    top: 100%;
    width: min(22rem, calc(100vw - 2rem));
    margin: .35rem 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    /* Закрытое состояние прячется через content-visibility, display при этом
       остаётся block: без своей непрозрачности переход не с чего начинать. */
    transform: translateY(-.4rem);
    opacity: 0;
    transition: opacity .28s ease, transform .28s ease, content-visibility .28s allow-discrete;
}
:where(.test-page) .about[open]::details-content{
    transform: translateY(0);
    opacity: 1;
}
@starting-style {
    :where(.test-page) .about[open]::details-content{
        opacity: 0;
        transform: translateY(-.4rem);
    }
}
@media (prefers-reduced-motion: reduce) {
    :where(.test-page) .about::details-content{ transition: none; }
}
:where(.test-page) .about > .about-panel{
    position: relative;
    margin: 0;
    padding: 1.9rem .9rem .75rem;
    font-size: .9rem;
    line-height: 1.45;
    color: var(--app-text);
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow);
    white-space: normal;
}
/* Браузер без ::details-content: плашка сама выходит из потока. */
@supports not selector(.about::details-content) {
    :where(.test-page) .about > .about-panel{
        position: absolute;
        right: 0;
        z-index: 20;
        width: min(22rem, calc(100vw - 2rem));
        margin-top: .35rem;
    }
}
:where(.test-page) button.about-close{
    position: absolute;
    top: .3rem;
    right: .3rem;
    width: 1.75rem;
    height: 1.75rem;
    margin: 0;
    padding: 0;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--app-muted);
    background: transparent;
    border: 0;
    border-radius: var(--app-radius);
    box-shadow: none;
    cursor: pointer;
}
:where(.test-page) button.about-close:hover, :where(.test-page) button.about-close:focus-visible{
    color: var(--app-text);
    background: var(--app-surface-2);
}

/* Меню в шапке ------------------------------------------------------------ */

/* Дропдаун Pico на нативном <details>: без JS, с клавиатуры и на телефоне.
   Открывается влево от кнопки – она стоит у правого края шапки. */
/* Нижний отступ, который Pico даёт всякому <details>, здесь снимается: с ним
   коробка меню выше соседей, а по центру строки flex ставит её вместе с
   отступом – и кнопка меню сидела на несколько пикселей выше переключателя
   курсов. Тот же ноль стоит и у .course-switch. */
:where(.test-page) .app-menu{
    flex: 0 0 auto;
    margin: 0 0 0 auto;
}
:where(.test-page) .app-menu > summary{
    display: flex;
    align-items: center;
    gap: .5rem;
    max-width: 12rem;
    color: var(--app-text);
}
:where(.test-page) .app-menu-name{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* На узком экране от кнопки остаётся кружок с инициалами: имя ученик и так
   знает, а место в шапке дороже. */
@media (max-width: 30rem) {
    :where(.test-page) .app-menu-name{ display: none; }
}
/* Селектор с details: у собственного правила Pico для выпадающего списка
   специфичность выше, и без этого меню осталось бы прибитым к левому краю
   кнопки и шириной с неё. */
:where(.test-page) details.app-menu > summary + ul{
    right: 0;
    left: auto;
    /* Фиксированная ширина: иначе select «Фон» раздувает меню длинными
       слагами, и пункты получаются разной ширины. */
    width: 12.5rem;
    min-width: 12.5rem;
    max-width: min(16rem, calc(100vw - 2rem));
}
:where(.test-page) details.app-menu > summary + ul li{ list-style: none; }

/* Бургер справа от аватара – настоящий элемент, не ::before Pico.
   ::before при [open] Pico забирает под клик-снаружи, поэтому иконка
   не может жить на псевдоэлементе. */ 
:where(.test-page) details.app-menu > summary:not([role])::after{ display: none; }
:where(.test-page) .app-menu-burger{
    flex: 0 0 auto;
    width: 1.05rem;
    height: .72rem;
    background:
        linear-gradient(currentColor, currentColor) center top / 100% 2px no-repeat,
        linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
        linear-gradient(currentColor, currentColor) center bottom / 100% 2px no-repeat;
}

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

:where(.test-page) .muted{ color: var(--app-muted); }
:where(.test-page) .small{ font-size: .85em; }
:where(.test-page) .hint{ color: var(--app-muted); font-size: .9rem; margin: 0 0 .6rem; }
:where(.test-page) .error-text{ color: var(--app-bad); font-weight: 600; }

:where(.test-page) .checkbox{ display: flex; align-items: center; gap: .5rem; }
:where(.test-page) .checkbox input{ margin: 0; }

/* На телефоне iOS зумит поля с font-size < 16px – фиксируем. */
@media (max-width: 768px) {
    :where(.test-page) input, :where(.test-page) select, :where(.test-page) textarea, :where(.test-page) button{ font-size: 16px; }
}

/* Таблицы прокручиваются вбок пальцем и колесом, но полосу не показывают:
   она съедает высоту и мешает читать. Прокрутка здесь, а не в admin.css:
   широкая таблица есть и в кабинете, и без overflow она тянула вбок всю
   страницу. */
:where(.test-page) .table-wrap{
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
:where(.test-page) .table-wrap::-webkit-scrollbar{ width: 0; height: 0; display: none; }

/* Карточки простых страниц: вход, главная, ошибка -------------------------- */

:where(.test-page) .page-card{
    max-width: 28rem;
    margin: 3rem auto;
}
:where(.test-page) .page-card h1{ margin: 0 0 .6rem; font-size: 1.4rem; }
:where(.test-page) .page-card a[role="button"]{ width: auto; }

/* Футер ------------------------------------------------------------------- */

/* Прижимается к низу на короткой странице. Флекс включается только там, где
   футер есть: страница теста переопределяет body целиком, и трогать её
   раскладку незачем. */
.test-page:has(.app-footer){
    display: flex;
    flex-direction: column;
}
.test-page:has(.app-footer) > main{ flex: 1 0 auto; }

:where(.test-page) .app-footer{
    padding: .9rem 0;
    margin-top: 1.6rem;
    font-size: .82rem;
    color: var(--app-muted);
}
:where(.test-page) .app-footer a{ color: inherit; }

/* Правовые документы ------------------------------------------------------
   Стили здесь, а не в отдельном файле страницы, намеренно: опубликованная
   редакция документа больше не редактируется, и ссылки на файлы стилей внутри
   неё стали бы вечными – переименовать такой файл было бы уже нельзя. */

:where(.test-page) .legal{ max-width: 46rem; }
:where(.test-page) .legal h1{ font-size: 1.5rem; }
:where(.test-page) .legal h2{ margin-top: 1.8rem; font-size: 1.1rem; }
:where(.test-page) .legal p, :where(.test-page) .legal li{ line-height: 1.6; }

/* Компоненты интерфейса ----------------------------------------------------
   Кирпичики, из которых собираются страницы: карточка, сетка, статистика,
   полоса прогресса, значок, «таблетка», достижение, цитата, пустое состояние.
   Раскладка конкретных страниц – в cabinet.css, палитра – в themes.css.

   Оболочка карточки – класс, а не партиал: шаблон Go не умеет принимать
   вложенное содержимое, и партиал пришлось бы разрезать на «начало» и «конец».
   Партиалы есть у тех компонентов, у которых содержимое своё, а не чужое. */

/* Карточка ---------------------------------------------------------------- */

:where(.test-page) .ui-icon{
    display: block;
    width: 1em;
    height: 1em;
    fill: none;
}

:where(.test-page) .card{
    padding: var(--app-gap-l);
    background: var(--app-surface);
    border: 1px solid transparent;
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow);
}

/* Наведение – только у карточек, которые куда-то ведут: приподнимать то,
   на что нельзя нажать, значит обещать несуществующее действие. */
:where(.test-page) .card-hover{
    transition: transform .15s ease, box-shadow .15s ease;
}
:where(.test-page) .card-hover:hover{
    transform: translateY(-2px);
    box-shadow: var(--app-shadow-lg);
}

/* Сетки ------------------------------------------------------------------- */

/* Ровно 4 / 2 / 1 и 3 / 1, а не auto-fit: у auto-fit посреди диапазона
   выходит три карточки в ряд и одна под ними – сетка на глаз разъезжается. */
:where(.test-page) .grid-4, :where(.test-page) .grid-3{
    display: grid;
    gap: var(--app-gap-m);
    grid-template-columns: 1fr;
}
@media (min-width: 40rem) {
    :where(.test-page) .grid-4{ grid-template-columns: repeat(2, 1fr); }
    :where(.test-page) .grid-3{ grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 64rem) {
    :where(.test-page) .grid-4{ grid-template-columns: repeat(4, 1fr); }
}

/* Секция страницы: заголовок, ссылка «все» справа и воздух под блоком. */
:where(.test-page) .section{ margin-bottom: var(--app-gap-xl); }
:where(.test-page) .section-head{
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--app-gap-s) var(--app-gap-m);
    margin-bottom: var(--app-gap-m);
}
:where(.test-page) .section-head h2{ margin: 0; font-size: 1.15rem; }
:where(.test-page) .section-more{ font-size: .875rem; text-decoration: none; white-space: nowrap; }

/* Карточка показателя ------------------------------------------------------ */

:where(.test-page) .stat{
    display: flex;
    flex-direction: column;
    gap: .35rem;
    height: 100%;
}
/* Высота шапки задана: у одних карточек метка в одну строку, у других в две,
   и без этого крупные значения в ряду стояли бы на разных уровнях. */
:where(.test-page) .stat-top{ display: flex; align-items: center; gap: .5rem; min-height: 2.6rem; }
:where(.test-page) .stat-emblem{
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    font-size: 1.05rem;
    line-height: 1;
    background: var(--app-accent-soft);
    border-radius: .65rem;
}
:where(.test-page) .stat-label{ font-size: .9rem; line-height: 1.25; color: var(--app-muted); }
:where(.test-page) .stat-value{
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
:where(.test-page) .stat-unit{ font-size: 1rem; font-weight: 400; color: var(--app-muted); }
:where(.test-page) .stat-note{ margin: 0; font-size: .85rem; color: var(--app-muted); }
/* Ссылка прижата к низу: карточки в ряду одной высоты, и «Подробнее»
   должно стоять на одной линии во всех, а не сразу под текстом. */
:where(.test-page) .stat-link{
    margin-top: auto;
    padding-top: .7rem;
    font-size: .875rem;
    text-decoration: none;
}

/* Полоса прогресса --------------------------------------------------------- */

:where(.test-page) .bar{
    overflow: hidden;
    height: .5rem;
    background: var(--app-surface-2);
    border-radius: 999px;
}
:where(.test-page) .bar-fill{
    display: block;
    width: var(--p, 0%);
    height: 100%;
    background: var(--app-accent);
    border-radius: 999px;
    animation: bar-grow .6s ease-out both;
}
:where(.test-page) .bar-ok   .bar-fill{ background: var(--app-ok); }
:where(.test-page) .bar-warn .bar-fill{ background: var(--app-warn); }

@keyframes bar-grow {
    from { width: 0; }
    to   { width: var(--p, 0%); }
}

/* Значок статуса ----------------------------------------------------------- */

:where(.test-page) .badge{
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .15rem .55rem;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
    color: var(--app-muted);
    background: var(--app-surface-2);
    border: 1px solid transparent;
    border-radius: 999px;
}
:where(.test-page) .badge-ok{ color: var(--app-ok);     background: var(--app-ok-soft); }
:where(.test-page) .badge-warn{ color: var(--app-warn);   background: var(--app-warn-soft); }
:where(.test-page) .badge-bad{ color: var(--app-bad);    background: var(--app-bad-soft); }
:where(.test-page) .badge-accent{ color: var(--app-accent); background: var(--app-accent-soft); }
:where(.test-page) .badge-pending{ color: var(--app-pending); }
:where(.test-page) .badge-muted{ color: var(--app-muted); }

/* «Таблетка»: фильтр, переключатель курса ---------------------------------- */

:where(.test-page) .chip{
    display: inline-block;
    padding: .35rem .85rem;
    font-size: .875rem;
    color: var(--app-muted);
    text-decoration: none;
    background: var(--app-surface-2);
    border: 1px solid transparent;
    border-radius: 999px;
}
:where(.test-page) .chip:hover{ color: var(--app-text); }
:where(.test-page) .chip-on{
    color: var(--app-accent-contrast);
    background: var(--app-accent);
}

/* Достижение --------------------------------------------------------------- */

:where(.test-page) .trophy{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    height: 100%;
    min-height: 11.25rem;
    margin-top: 3px;
    padding: var(--app-gap-m);
    text-align: center;
}
:where(.test-page) .trophy-emblem{
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 3.25rem;
    height: 3.25rem;
    font-size: 1.8rem;
    line-height: 1;
    background: var(--app-accent-soft);
    border-radius: 50%;
}
:where(.test-page) .trophy-title{
    margin: 0;
    min-height: 2.4em;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
:where(.test-page) .trophy-note{
    margin: 0;
    min-height: 1.15em;
    font-size: .78rem;
    color: var(--app-muted);
}
:where(.test-page) .trophy-bar{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: .25rem;
    width: 100%;
    min-height: 2.35rem;
    margin-top: auto;
    padding-top: .5rem;
}
:where(.test-page) .trophy-bar-slot{
    display: block;
    height: 2.35rem;
}

/* Неполученная награда приглушена целиком: замок вместо эмблемы и серый круг
   вместо цветного – цель видно, но с полученными её не спутать. */
:where(.test-page) .trophy-off .trophy-emblem{ background: var(--app-surface-2); opacity: .8; }
:where(.test-page) .trophy-off .trophy-title{ color: var(--app-muted); }

/* Карточка с подсказкой: курсор говорит, что за наведением что-то будет. */
:where(.test-page) .trophy[tabindex]{ cursor: help; }

/* Всплывающая подсказка ---------------------------------------------------- */

/* Класс .tip, а не .hint: .hint в админке – это подпись под полем формы, и
   спрятать её заодно было бы весело.

   Всплывающий слой, а не абсолютный блок внутри карточки: лента наград
   прокручивается пальцем, то есть обрезает всё, что вылезло за её край.
   popover рисуется поверх страницы и обрезаться не может.

   По умолчанию подсказка спрятана намертво: браузер, который popover не знает,
   покажет её как обычный абзац посреди карточки – пусть уж лучше не покажет
   вовсе. Открывает её js/core/hint.js, он же ставит координаты. */
:where(.test-page) .tip{ display: none; }
:where(.test-page) .tip:popover-open{
    display: block;
    position: fixed;
    inset: auto;
    max-width: min(20rem, calc(100vw - 2rem));
    margin: 0;
    padding: .5rem .7rem;
    color: var(--app-text);
    font-size: .8rem;
    line-height: 1.35;
    text-align: left;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow-lg);
}

/* Цитата ------------------------------------------------------------------- */

:where(.test-page) .quote{
    display: flex;
    flex-direction: column;
    gap: .4rem;
    height: 100%;
    margin: 0;
    padding: var(--app-gap-l);
    background: var(--app-accent-soft);
    border-radius: var(--app-radius-lg);
}
:where(.test-page) .quote-mark{ font-size: 1.6rem; line-height: 1; color: var(--app-accent); opacity: .55; }
:where(.test-page) .quote blockquote{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 1.05rem;
    line-height: 1.6;
}
:where(.test-page) .quote figcaption{ margin-top: auto; padding-top: .6rem; text-align: right;
                    font-size: .85rem; color: var(--app-muted); }

/* Пустое состояние --------------------------------------------------------- */

:where(.test-page) .empty{
    padding: var(--app-gap-xl) var(--app-gap-l);
    text-align: center;
}
:where(.test-page) .empty-emblem{ display: block; margin-bottom: .6rem; font-size: 2.5rem; line-height: 1; }
:where(.test-page) .empty h2{ margin: 0 0 .4rem; font-size: 1.1rem; }
:where(.test-page) .empty p{ margin: 0 auto; max-width: 32rem; color: var(--app-muted); }
:where(.test-page) .empty a{ display: inline-block; margin-top: var(--app-gap-m); }

/* Аватар ------------------------------------------------------------------- */

:where(.test-page) .avatar{
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1;
    color: var(--app-accent);
    background: var(--app-accent-soft);
    border-radius: 50%;
}

/* Тона текста -------------------------------------------------------------- */

:where(.test-page) .tone-ok{ color: var(--app-ok); }
:where(.test-page) .tone-warn{ color: var(--app-warn); }
:where(.test-page) .tone-bad{ color: var(--app-bad); }
:where(.test-page) .tone-accent{ color: var(--app-accent); }

/* Ошибка сервера ---------------------------------------------------------- */

/* Плашка поверх шапки: та липкая и с z-index 10, про неё нельзя промахнуться.
   Пока класс is-in не поставлен, блок прозрачный и сдвинут вверх – так
   появление успевает проиграться, а не вспыхнуть сразу. */
:where(.test-page) .server-error{
    position: fixed;
    z-index: 40;
    top: max(.75rem, env(safe-area-inset-top, 0px));
    left: 50%;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    width: min(28rem, calc(100vw - 1.5rem));
    margin: 0;
    padding: .75rem .7rem .75rem .95rem;
    color: var(--app-text);
    background: var(--app-surface);
    border: 1px solid var(--app-bad);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow-lg);
    transform: translate(-50%, -.6rem);
    opacity: 0;
    transition: opacity .22s ease, transform .22s ease;
}
:where(.test-page) .server-error.is-in{
    transform: translate(-50%, 0);
    opacity: 1;
}
:where(.test-page) .server-error p{
    flex: 1;
    margin: 0;
    font-size: .925rem;
    line-height: 1.4;
}
:where(.test-page) button.server-error-close{
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    margin: 0;
    padding: 0;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--app-muted);
    background: transparent;
    border: 0;
    border-radius: var(--app-radius);
    box-shadow: none;
    cursor: pointer;
}
:where(.test-page) button.server-error-close:hover, :where(.test-page) button.server-error-close:focus-visible{
    color: var(--app-text);
    background: var(--app-surface-2);
}

/* Движение ----------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    :where(.test-page) .card-hover{ transition: none; }
    :where(.test-page) .card-hover:hover{ transform: none; }
    :where(.test-page) .bar-fill{ animation: none; }
    :where(.test-page) .server-error{ transition: none; }
}


/* Страница теста -----------------------------------------------------------
   Управление тестом, вкладки категорий, кружки панелей, само задание,
   карточки, интерактивные пары, нижняя навигация и карточка результата.
   Подключается только страницей теста.

   Визуальный язык тот же, что у кабинета: Onest / Golos Text, стеклянная
   шапка, приглушённые поверхности. Задания и навигация теста не трогаем –
   только оболочка. */

.test-page{
    --test-display: "Golos Text", "Onest", var(--app-font);
    font-family: "Onest", var(--app-font);
    letter-spacing: 0;
}

.test-page .app-header{
    padding: 0;
    margin-bottom: .6rem;
    color: var(--app-header-text);
    background: color-mix(in srgb, var(--app-bg) 55%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--app-text) 16%, transparent);
    box-shadow:
        0 1px 0 color-mix(in srgb, #fff 45%, transparent),
        0 .7rem 1.5rem rgb(45 41 57 / 9%);
    backdrop-filter: blur(16px) saturate(1.12);
    -webkit-backdrop-filter: blur(16px) saturate(1.12);
}

.test-page .app-header-inner{
    align-items: center;
    min-height: 3.55rem;
    padding: .35rem 0;
}

.test-page .test-title{
    font-family: var(--test-display);
    font-size: 1.15rem;
    font-weight: 680;
    letter-spacing: -.015em;
    color: var(--app-text);
}

.test-page .app-header-sub{
    padding-bottom: .45rem;
    color: var(--app-muted);
}

.test-page .app-menu-name{ display: none; }

.test-page details.app-menu > summary:not([role]){
    display: flex;
    align-items: center;
    gap: .5rem;
    height: 100%;
    min-height: 2.8rem;
    margin: 0;
    padding: 0;
    color: var(--app-text);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.test-page details.app-menu > summary:not([role])::after{ display: none; }

.test-page .avatar{
    flex: 0 0 1.85rem;
    width: 1.85rem !important;
    height: 1.85rem !important;
    min-width: 1.85rem;
    aspect-ratio: 1 / 1;
    color: var(--app-accent-contrast);
    background: var(--app-accent);
    font-size: .72rem;
    font-weight: 700;
}

/* Категории: спокойные пилюли в тоне кабинета, без «кнопочности» Pico. */
.test-page .cat-tab{
    position: relative;
    z-index: 1;
    border-radius: .7rem;
    border-color: color-mix(in srgb, var(--app-text) 14%, transparent);
    background: color-mix(in srgb, var(--app-surface) 70%, transparent);
    font-weight: 600;
    box-shadow: none;
    transition:
        background-color .26s cubic-bezier(.22, .61, .36, 1),
        color .26s cubic-bezier(.22, .61, .36, 1),
        border-color .26s cubic-bezier(.22, .61, .36, 1),
        box-shadow .26s cubic-bezier(.22, .61, .36, 1);
}
.test-page .cat-tab[aria-selected="true"]{
    background: var(--app-accent);
    border-color: var(--app-accent);
    color: var(--app-accent-contrast);
    box-shadow: 0 0 .7rem color-mix(in srgb, var(--app-accent) 46%, transparent);
}
.test-page .cat-glide{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    border-radius: .7rem;
    background: var(--app-accent);
    box-shadow: 0 0 .7rem color-mix(in srgb, var(--app-accent) 46%, transparent);
    pointer-events: none;
}
.test-page .cat-tabs.is-gliding .cat-glide{ display: block; }

.test-page .task-nav{
    background: color-mix(in srgb, var(--app-bg) 70%, transparent);
    border-top: 1px solid color-mix(in srgb, var(--app-text) 14%, transparent);
    box-shadow: 0 -.5rem 1.2rem rgb(45 41 57 / 8%);
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
}

.test-page .task-nav .nav-arrow{
    background: var(--app-surface);
    border-color: color-mix(in srgb, var(--app-text) 14%, transparent);
}

/* Управление тестом ------------------------------------------------------- */

/* Первая черта страницы: выше – чем управлять тестом, ниже – само задание. */
:where(.test-page) .test-controls{
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--app-border);
}
.test-page.is-page-glide .test-controls{
    border-bottom-width: 0;
    padding-bottom: 0;
}
.test-page .page-rule{ display: none; height: 0; margin: 0; padding: 0; border: 0; }
.test-page.is-page-glide .page-rule{
    display: block;
    height: auto;
    padding-top: .5rem;
    border: 0;
    border-bottom: 1px solid var(--app-border);
}

/* Вкладки категорий ------------------------------------------------------- */

:where(.test-page) .cat-tabs,
:where(.test-page) .dots{
    /* Горизонталь ведёт один жест (pointer и колесо), не жест браузера.
       Вертикаль остаётся прокруткой страницы. */
    touch-action: pan-y;
    overscroll-behavior-x: contain;
}
:where(.test-page) .cat-tab,
:where(.test-page) .dot{
    touch-action: pan-y;
}
:where(.test-page) .cat-tabs.is-dragging,
:where(.test-page) .dots.is-dragging{
    cursor: grabbing;
    user-select: none;
}
:where(.test-page) .scroll-fade,
:where(.test-page) .dots-viewport,
:where(.test-page) .test-controls{
    min-width: 0;
    max-width: 100%;
}
:where(.test-page) .cat-tabs{
    position: relative;
    display: flex;
    /* safe center: при переполнении полоса выравнивается по началу, иначе
       первые вкладки уезжали бы за левый край и до них было не доскроллить. */
    justify-content: safe center;
    gap: .4rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: .2rem 0 .5rem;
}
:where(.test-page) .cat-tab{
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    min-height: 44px;
    padding: .45rem .85rem;
    border-radius: 999px;
    border: 1px solid var(--app-border);
    background: transparent;
    color: var(--app-text);
    font-size: .9rem;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}
:where(.test-page) .cat-tab[aria-selected="true"]{
    background: var(--app-accent);
    border-color: var(--app-accent);
    color: var(--app-accent-contrast);
    box-shadow: 0 0 .7rem color-mix(in srgb, var(--app-accent) 46%, transparent);
}
:where(.test-page) .cat-title{ white-space: nowrap; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; }
:where(.test-page) .cat-count{ font-size: .78rem; opacity: .8; font-variant-numeric: tabular-nums; }

@media (min-width: 768px) {
    :where(.test-page) .cat-title{ max-width: 24ch; }
}

/* Кружки задач ------------------------------------------------------------ */

/* Ряд не переносится на вторую строку, а прокручивается вбок: иначе длинный
   словарь поднимал бы управление на три строки и съедал экран у задания. */
:where(.test-page) .dots-viewport{ position: relative; }
:where(.test-page) .dots-viewport.is-gliding{ overflow: visible; z-index: 3; }
:where(.test-page) .dot-glide{
    display: none;
    position: fixed;
    z-index: 4;
    box-sizing: border-box;
    margin: 0;
    border: 2px solid var(--app-accent);
    border-radius: 999px;
    pointer-events: none;
}
:where(.test-page) .dots.is-gliding{ position: relative; }
:where(.test-page) .dots.is-gliding .dot-glide{ display: block; }
:where(.test-page) .dots.is-gliding .dot[aria-current="true"] .dot-mark{ outline: none; }
:where(.test-page) .dots{
    display: flex;
    flex-wrap: nowrap;
    justify-content: safe center;
    gap: .1rem .2rem;
    margin: 0;
    overflow-x: auto;
    overflow-y: hidden;
}
/* Кружки не ужимаются под ширину ряда: без этого на телефоне длинные подписи
   сжимались до 44 px тач-таргета, а сама пилюля вылезала за него и наезжала
   на соседнюю. Не влезли – ряд прокручивается вбок, для того он и такой. */
:where(.test-page) .dot{ flex: 0 0 auto; }

/* Кнопка – тач-таргет 44 px, видимая метка внутри вдвое меньше.
   У тренажёров вместо номера стоит их заголовок, поэтому метка умеет
   растягиваться в пилюлю. */
:where(.test-page) .dot{
    min-width: 44px;
    height: 44px;
    margin: 0;
    padding: 0 .1rem;
    border: 0;
    background: transparent;
    display: inline-grid;
    place-items: center;
}
:where(.test-page) .dot-mark{
    display: grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 .35rem;
    border-radius: 999px;
    border: 1px solid var(--app-border);
    background: transparent;
    color: var(--app-text);
    font-size: .72rem;
    line-height: 1;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
/* Текстовая пилюля: grid не умеет обрезать текст многоточием, поэтому здесь
   обычный блок, а по вертикали текст держит line-height. */
:where(.test-page) .dot-wide .dot-mark{
    display: block;
    max-width: 16ch;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
}

:where(.test-page) .dot[data-answered="true"]    .dot-mark{ background: var(--app-accent);  border-color: var(--app-accent);  color: var(--app-accent-contrast); }
:where(.test-page) .dot[data-status="correct"]   .dot-mark{ background: var(--app-ok);      border-color: var(--app-ok);      color: #fff; }
:where(.test-page) .dot[data-status="incorrect"] .dot-mark{ background: var(--app-bad);     border-color: var(--app-bad);     color: #fff; }
:where(.test-page) .dot[data-status="pending"]   .dot-mark{ background: var(--app-pending); border-color: var(--app-pending); color: #fff; }
/* Тренажёр не отслеживается: метка остаётся контурной, но читаемой. */
:where(.test-page) .dot[data-graded="false"] .dot-mark{ background: transparent; border-color: var(--app-border); color: var(--app-muted); }
:where(.test-page) .dot[aria-current="true"] .dot-mark{ outline: 2px solid var(--app-accent); outline-offset: 2px; }

/* Клик мышью не должен рисовать вторую обводку поверх кружка: у Pico своя
   рамка на :focus, и она обводила весь 44-пиксельный тач-таргет. С клавиатуры
   (:focus-visible) рамка остаётся – иначе не видно, где ты находишься. */
:where(.test-page) .dot:focus:not(:focus-visible), :where(.test-page) .cat-tab:focus:not(:focus-visible), :where(.test-page) .tool-btn:focus:not(:focus-visible){ outline: none; box-shadow: none; }

/* Панель задачи ----------------------------------------------------------- */

/* Отступ сверху живёт на самой панели, а не на блоке: соседняя страница
   позиционируется абсолютом от padding-box блока, и при отступе на нём
   въезжающая страница вставала бы выше уезжающей. */
:where(.test-page) .panels{ position: relative; }

/* Перелистывание: соседняя страница ложится поверх текущей абсолютом, обе
   едут вбок одним движением, а лишнее срезается по краям блока. clip только
   по горизонтали – вертикальную прокрутку страницы это трогать не должно. */
:where(.test-page) .panels-sliding{
    overflow-x: clip;
    overflow-y: visible;
    touch-action: pan-y;
}
:where(.test-page) .panels-sliding .panel{ will-change: transform; }
:where(.test-page) .panel-incoming{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

/* Высоту панели и её тела считает JS: окно минус шапка страницы, блок
   управления, нижняя панель и шапка самого задания. Константы в calc() не
   годились – шапка задания у разных типов разной высоты. Запасные значения
   в var() нужны только до первого замера и при выключенном JS. */
/* Боковые отступы – воздух у краёв страницы: без них варианты ответа и пары
   упираются в самый край, а на перелистывании соседняя страница проезжает
   вплотную к содержимому текущей. */
:where(.test-page) .panel{ min-height: var(--panel-h, 60vh); padding: .8rem .6rem .5rem; }

/* Шапка задания: слева пустая колонка, по центру текст, справа кнопки.
   Обе боковые – 1fr, поэтому середина совпадает с серединой экрана.
   Ниже вторая черта страницы: под ней только то, чем отвечает ученик.
   Имя panel-*, а не task-*: `.task-head` уже занято карточкой задания
   в админке, и её display: flex перебивал бы эту сетку. */
:where(.test-page) .panel-head{
    display: grid;
    grid-template-columns: 1fr minmax(0, auto) 1fr;
    align-items: start;
    gap: .8rem;
    padding-bottom: .8rem;
    border-bottom: 1px solid var(--app-border);
}
:where(.test-page) .panel-head-main{ grid-column: 2; min-width: 0; }
/* Кнопки прижаты к правому краю и меряются по своей подписи, а не по
   колонке: растянутые во всю ширину они спорили бы с самим заданием. */
:where(.test-page) .panel-head-tools{ display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; }
:where(.test-page) .panel-head-tools:empty{ display: none; }
:where(.test-page) .tool-btn{
    width: auto;
    margin: 0;
    min-height: 34px;
    padding: .2rem .7rem;
    font-size: .8rem;
    white-space: nowrap;
}

/* Тело задания занимает всю оставшуюся высоту: короткое содержимое стоит по
   центру, а карточки и пары растягиваются на всё место. */
:where(.test-page) .panel-body{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 1rem;
}
/* Ширину задаём явно: в колоночном flex горизонтальные `margin: auto`
   (ими всё внутри задания центрируется) отключают растяжение, и блок
   съёживается по содержимому. max-width при этом продолжает работать. */
:where(.test-page) .panel-body > *{ width: 100%; }
/* Варианты ответа сюда не входят намеренно: они остаются кучкой по центру.
   Карточки и пары – наоборот, разбирают всё свободное место. */
:where(.test-page) .panel-body > .pairs, :where(.test-page) .panel-body > .cards{ flex: 1 1 auto; }

/* На узком экране колонка кнопок разворачивается в строку над текстом:
   три колонки там не помещаются, а кнопок никогда не больше двух. */
@media (max-width: 767px) {
    :where(.test-page) .panel-head{ grid-template-columns: minmax(0, 1fr); gap: .5rem; }
    :where(.test-page) .panel-head-side:empty{ display: none; }
    :where(.test-page) .panel-head-main{ grid-column: 1; order: 2; }
    :where(.test-page) .panel-head-tools{ flex-direction: row; flex-wrap: wrap; justify-content: center; order: 1; }
}

:where(.test-page) .panel-kind{ font-size: .8rem; color: var(--app-muted); margin: 0 0 .3rem; text-align: center; }
:where(.test-page) .prompt{ font-size: 1.15rem; margin: 0 auto .4rem; max-width: 46rem; text-align: center; }
:where(.test-page) .panel-head-main .hint{ margin: .2rem 0 0; }
:where(.test-page) .panel-head-main .pairs-status{ margin: .2rem 0 0; text-align: center; }

/* По ширине варианты расходятся на всё тело задания, а по высоте – нет:
   строка растёт под свой текст и не больше. Растянутые на весь экран, они
   заставляли бегать глазами от края до края, а выбирать удобнее из кучки. */
:where(.test-page) .options{
    display: grid;
    grid-auto-rows: minmax(44px, auto);
    gap: .5rem;
    align-content: center;
}
/* Селектор с двумя классами нарочно: у Pico есть правило
   `label:has([type=radio]) { width: fit-content }` для строчных галочек,
   и оно специфичнее одиночного .option – вариант сжимался в узкую полоску. */
:where(.test-page) .options .option{
    display: flex;
    width: 100%;
    align-items: center;
    gap: .7rem;
    min-height: 44px;
    margin: 0;
    padding: .6rem .8rem;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface);
    cursor: pointer;
}
:where(.test-page) .option input{ margin: 0; flex: 0 0 auto; }
:where(.test-page) .option:has(input:checked){
    border-color: var(--app-accent);
    background: color-mix(in srgb, var(--app-accent) 10%, var(--app-surface));
}

:where(.test-page) .fill-input, :where(.test-page) .translate-input{ display: block; max-width: 34rem; margin: 0 auto .4rem; }
:where(.test-page) .translate-input{ min-height: 5rem; }
:where(.test-page) .answer-note{ text-align: center; }

:where(.test-page) .answer-note{ margin: .2rem 0; font-size: .95rem; }
:where(.test-page) .answer-note-ok{ color: var(--app-ok); }
:where(.test-page) .answer-note-bad{ color: var(--app-bad); }
:where(.test-page) .answer-note-wait{ color: var(--app-pending); }

:where(.test-page) .wf-line{ text-align: center; font-size: 1.2rem; margin-bottom: 1rem; }
:where(.test-page) .wf-word{ font-weight: 700; }
:where(.test-page) .wf-hint{ color: var(--app-muted); }
:where(.test-page) .source-ru{ font-size: 1.2rem; text-align: center; max-width: 46rem; margin: 0 auto .9rem; }

:where(.test-page) .matching{ display: flex; flex-direction: column; gap: .7rem; max-width: 52rem; margin: 0 auto; }
:where(.test-page) .match-row{ display: grid; grid-template-columns: 1fr; gap: .3rem; align-items: center; }
:where(.test-page) .match-row select{ margin: 0; }
:where(.test-page) .match-left{ font-weight: 600; }
@media (min-width: 640px) {
    :where(.test-page) .match-row{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
}

/* На широком экране варианты не выстраиваются в одну узкую колонку,
   а расходятся по ширине. */
@media (min-width: 1024px) {
    :where(.test-page) .options{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .6rem 1rem;
        max-width: 62rem;
        margin: 0 auto;
    }
    :where(.test-page) .fill-input, :where(.test-page) .translate-input{ max-width: 42rem; }
}

/* Чтение с утверждениями -------------------------------------------------- */

/* Узкий экран: одна колонка, никаких вложенных прокруток – панель растёт, и
   прокручивается страница, как у карточек с длинной фразой. */
:where(.test-page) .reading{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 62rem;
    margin: 0 auto;
    min-height: 0;
}
:where(.test-page) .reading-text{
    position: relative;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface);
    padding: .8rem 3rem .8rem 1rem;
    line-height: 1.55;
}
.test-page .reading-expand{
    position: absolute;
    top: .4rem;
    right: .4rem;
    z-index: 1;
    width: 2.4rem;
    height: 2.4rem;
    min-width: 2.4rem;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--app-radius);
    color: var(--app-text);
    background: color-mix(in srgb, var(--app-bg, #fff) 82%, transparent);
    border: 1px solid var(--app-border);
    box-shadow: 0 .15rem .45rem rgb(0 0 0 / .18);
    line-height: 1;
    font-size: 1.05rem;
}
.test-page .reading-focus:not([open]){ display: none; }
.test-page .reading-focus[open]{
    display: block;
    border: none;
    padding: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    background: rgb(0 0 0 / .72);
    color: var(--app-text);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.test-page .reading-focus::backdrop{ background: rgb(0 0 0 / .72); }
.test-page .reading-focus-body{
    width: min(46rem, calc(100% - 1.5rem));
    height: calc(100dvh - 1.5rem);
    margin: .75rem auto;
    padding: 3.2rem 1.5rem 1.6rem;
    overflow: auto;
    background: var(--app-bg);
    border-radius: var(--app-radius, .6rem);
    box-shadow: 0 1rem 3rem rgb(0 0 0 / .35);
    font-size: 1.15rem;
    line-height: 1.65;
}
.test-page .reading-focus-body p{ margin: 0 0 1rem; }
.test-page .reading-focus-body p:last-child{ margin-bottom: 0; }
.test-page .reading-focus-close{
    position: absolute;
    top: 1.15rem;
    right: max(.9rem, calc((100% - min(46rem, calc(100% - 1.5rem))) / 2 + .5rem));
    z-index: 3;
    width: auto;
    margin: 0;
    padding: .5rem .9rem;
    background: color-mix(in srgb, var(--app-text) 8%, var(--app-bg));
    border: 1px solid var(--app-border);
    color: var(--app-text);
}
:where(.test-page) .reading-text p{ margin: 0 0 .7rem; }
:where(.test-page) .reading-text p:last-child{ margin-bottom: 0; }

:where(.test-page) .reading-statements{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
:where(.test-page) .reading-statements .statement{ margin: 0; }
:where(.test-page) .statement-text{ margin: 0 0 .4rem; font-weight: 600; }
/* Три варианта в строку: они короткие, и вертикальный столбик из них съедал
   бы экран на каждом утверждении. */
:where(.test-page) .options-inline{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
:where(.test-page) .options-inline .option{ padding: .5rem .6rem; gap: .45rem; }
:where(.test-page) .reading .answer-note{ text-align: left; }

/* Широкий экран: текст и утверждения рядом, у каждой колонки своя прокрутка.
   Чтение – это сверка утверждения с текстом, и держать их врозь значит
   заставить ученика крутить панель на каждое утверждение. */
@media (min-width: 900px) {
    :where(.test-page) .reading{
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 1.4rem;
        align-items: stretch;
        flex: 1 1 auto;
    }
    :where(.test-page) .reading-text, :where(.test-page) .reading-statements{ overflow-y: auto; min-height: 0; }
}
@media (min-width: 1024px) {
    /* Три варианта у утверждения остаются в строку и в две колонки не
       разъезжаются: правило .options выше про варианты целого задания. */
    :where(.test-page) .options-inline{ grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
}

/* Эссе -------------------------------------------------------------------- */

:where(.test-page) .essay-input{ display: block; width: 100%; max-width: 46rem; margin: 0 auto .3rem; min-height: 12rem; }
:where(.test-page) .essay-count{ text-align: center; color: var(--app-muted); font-size: .95rem; margin: 0 0 .4rem; }
/* Счётчик краснеет за границами объёма, но отправку не блокирует: тест уходит
   одной формой, и запрет из-за одного эссе стоил бы всей остальной работы. */
:where(.test-page) .essay-count [data-essay-count][data-off="true"]{ color: var(--app-bad); }

/* Сборка ответа: порядок слов и корзины ----------------------------------- */

:where(.test-page) .assemble{
    display: flex;
    flex-direction: column;
    gap: .8rem;
    width: 100%;
    max-width: 52rem;
    margin: 0 auto;
}

/* Фишка – это кнопка: работает пальцем, мышью и с клавиатуры. */
:where(.test-page) .chip{
    margin: 0;
    padding: .45rem .7rem;
    width: auto;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface);
    background-color: var(--app-surface);
    color: inherit;
    font-size: 1rem;
    line-height: 1.2;
    cursor: pointer;
    overflow: hidden;
    box-shadow: none;
    outline: none;
    /* Слово удерживают, чтобы потянуть, – выделять его текст при этом незачем,
       да и системное меню выделения переносу только мешает. */
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
:where(.test-page) .chip[aria-pressed="true"]{
    border-color: var(--app-accent);
    background: color-mix(in srgb, var(--app-accent) 14%, var(--app-surface));
}
:where(.test-page) .chip:disabled{ cursor: default; opacity: 1; }
:where(.test-page) .chip-ok{ border-color: var(--app-ok);  background: color-mix(in srgb, var(--app-ok) 12%, var(--app-surface)); }
:where(.test-page) .chip-bad{ border-color: var(--app-bad); background: color-mix(in srgb, var(--app-bad) 12%, var(--app-surface)); }

:where(.test-page) .chip-wrap{ display: inline-flex; align-items: baseline; gap: .3rem; overflow: hidden; border-radius: var(--app-radius); }
/* Pico на :focus рисует свою обводку квадратом вокруг скруглённой фишки:
   при переносе эти углы торчат за кнопку. */
.test-page .chip:is(:hover, :active, :focus, :focus-visible){
    background: var(--app-surface);
    background-color: var(--app-surface);
    color: inherit;
    box-shadow: none;
    outline: none;
}
.test-page .chip[aria-pressed="true"]:is(:hover, :active, :focus){
    border-color: var(--app-accent);
    background: color-mix(in srgb, var(--app-accent) 14%, var(--app-surface));
    background-color: color-mix(in srgb, var(--app-accent) 14%, var(--app-surface));
}
:where(.test-page) .chip-note{ color: var(--app-bad); font-size: .85rem; white-space: nowrap; }

/* Фишка на весу: приподнята тенью и не ловит указатель – иначе цель под ней
   искалась бы в ней самой. Место в потоке за ней остаётся, поэтому отпущенная
   мимо цели она возвращается туда же, откуда её взяли. */
:where(.test-page) [data-dragging]{
    position: relative;
    z-index: 3;
    pointer-events: none;
}
:where(.test-page) [data-dragging] .chip{
    border-color: var(--app-accent);
    box-shadow: 0 .35rem .8rem rgb(0 0 0 / .25);
}

:where(.test-page) .assemble-bank{
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
    min-height: 3rem;
    padding: .6rem;
    border: 1px dashed var(--app-border);
    border-radius: var(--app-radius);
}

/* Строка ответа: рамка сплошная, а не пунктиром, – она и есть ответ, в
   отличие от банка, из которого слова только берут. */
:where(.test-page) .assemble-line{
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
    align-items: center;
    min-height: 3.4rem;
    padding: .6rem;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface);
}

/* Корзин от двух до четырёх: на телефоне они идут в две колонки, на широком
   экране встают в ряд. Пять колонок нечитаемы, поэтому больше четырёх их и
   не бывает. */
:where(.test-page) .buckets{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
}
/* Углы срезает шапка сама, а не overflow на корзине: из корзины слово
   вытаскивают, и обрезанная по рамке фишка на полпути исчезала бы. */
:where(.test-page) .bucket{
    display: flex;
    flex-direction: column;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
}
:where(.test-page) .bucket-head{
    margin: 0;
    width: 100%;
    padding: .45rem .6rem;
    border: 0;
    border-bottom: 1px solid var(--app-border);
    border-radius: calc(var(--app-radius) - 1px) calc(var(--app-radius) - 1px) 0 0;
    background: color-mix(in srgb, var(--app-accent) 10%, var(--app-surface));
    color: inherit;
    font-weight: 600;
    font-size: .95rem;
    cursor: pointer;
}
:where(.test-page) .bucket-head:disabled{ cursor: default; opacity: 1; }
:where(.test-page) .bucket-slot{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .4rem;
    min-height: 3.5rem;
    padding: .5rem;
    border-radius: 0 0 calc(var(--app-radius) - 1px) calc(var(--app-radius) - 1px);
}

/* Цель под пальцем: подсвечиваем ту корзину или банк, куда слово упадёт. */
:where(.test-page) .assemble-bank[data-drop="true"], :where(.test-page) .bucket[data-drop="true"]{
    border-color: var(--app-accent);
}
:where(.test-page) .assemble-bank[data-drop="true"], :where(.test-page) .bucket[data-drop="true"] .bucket-slot{
    background: color-mix(in srgb, var(--app-accent) 12%, var(--app-surface));
}

@media (min-width: 640px) {
    :where(.test-page) .buckets{ grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
}

/* Кроссворд --------------------------------------------------------------- */

/* Узкий экран: сетка сверху, загадки под ней. Клетка не уменьшается ниже
   --cw-cell – вместо этого сетка прокручивается вбок: сетка из двадцати
   клеток, вжатая в ширину телефона, не читается ни при каком шрифте.

   --cw-line – своя линия сетки, а не --app-border: та разделяет блоки и на
   светлых темах у клетки пропадает вовсе. Здесь нужен видимый край, и он
   взят от текста, приглушённого почти вдвое: темнее границы блоков на любой
   теме, край клетки виден сразу, и с буквами внутри линия не спорит. */
:where(.test-page) .crossword{
    --cw-cell: 2.1rem;
    --cw-line: color-mix(in srgb, var(--app-text) 45%, transparent);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 62rem;
    margin: 0 auto;
    min-height: 0;
}
/* Flex, а не просто overflow: иначе таблица растянулась бы по ширине обёртки и
   клетки перестали бы быть квадратными. */
:where(.test-page) .crossword-grid-wrap{
    display: flex;
    justify-content: safe center;
    overflow-x: auto;
    padding-bottom: .2rem;
    /* Прокрутка сетки не перетекает наружу: докрутив её до края, палец не
       должен начинать «назад» в браузере. touch-action тут не объявлен
       нарочно – он отнял бы у сетки щипок с увеличением, а жест страницы
       уступает ей сам (js/test/nav.js). */
    overscroll-behavior-x: contain;
}
/* Сетка сверху (узкий экран) выходит к самым краям окна: отступы колонки
   содержимого и панели отыграны отрицательным margin и возвращены внутрь
   padding-ом, поэтому пока сетка влезает – она стоит как все блоки, а не
   влезла – прокручивается по всей ширине экрана. Полторы клетки на телефоне
   это разница между «влезло» и «крути вбок».

   --cw-bleed повторяет сумму этих отступов: padding-inline у .container
   (webkit/css/base.css) плюс боковой padding у .panel. Второй запрос – та же
   сумма за порогом, на котором .container берёт отступ шире. */
@media (max-width: 899px) {
    :where(.test-page) .crossword-grid-wrap{
        --cw-bleed: calc(var(--app-gap-m) + .6rem);
        margin-inline: calc(-1 * var(--cw-bleed));
        padding-inline: var(--cw-bleed);
    }
}
@media (min-width: 48rem) and (max-width: 899px) {
    :where(.test-page) .crossword-grid-wrap{ --cw-bleed: calc(var(--app-gap-xl) + .6rem); }
}
/* width по содержимому, а не 100%: ширину таблицам задаёт pico, а здесь она
   должна быть суммой квадратных клеток. */
:where(.test-page) .crossword-grid{
    border-collapse: collapse;
    margin: 0;
    width: max-content;
    table-layout: fixed;
}
/* Клетка строго квадратная: размер задан втроём (min/width/max), иначе
   таблица растянет колонку по содержимому, а высоту – по межстрочному
   интервалу буквы. Рамка входит внутрь размера: без border-box соседние
   клетки различались бы на пиксель границы. */
:where(.test-page) .crossword-grid td{
    box-sizing: border-box;
    width: var(--cw-cell);
    min-width: var(--cw-cell);
    max-width: var(--cw-cell);
    height: var(--cw-cell);
    padding: 0;
    line-height: 1;
}
/* Границы у общего правила td нет нарочно: сброс `border: 0` там перебивал бы
   рамку клетки по специфичности – она и пропадала целиком. Каждая клетка
   объявляет свою границу сама, пустая – её отсутствие. */
:where(.test-page) .cw-blank{ border: 0; background: none; }
:where(.test-page) .cw-cell{
    position: relative;
    border: 1px solid var(--cw-line);
    background: var(--app-surface);
    text-align: center;
    vertical-align: middle;
}
:where(.test-page) .cw-num{
    position: absolute;
    top: 1px;
    left: 2px;
    font-size: .6rem;
    line-height: 1;
    color: var(--app-muted);
}
/* line-height: 1 – чтобы буква не растила строку: высота клетки задана
   таблицей, а межстрочный интервал её перебивал. */
:where(.test-page) .cw-letter{
    display: block;
    font-size: 1rem;
    line-height: 1;
    font-weight: 600;
    text-transform: uppercase;
}
/* Слово под курсором подсвечено целиком: иначе на пересечении не видно, какие
   клетки сейчас заполняются. */
:where(.test-page) .cw-active{ background: color-mix(in srgb, var(--app-accent) 14%, var(--app-surface)); }
/* Спорная клетка: два слова вписали в неё разные буквы. Это не проверка
   ответа, а видимое противоречие внутри самого ввода. */
:where(.test-page) .cw-conflict{
    background: color-mix(in srgb, var(--app-bad) 18%, var(--app-surface));
    border-color: var(--app-bad);
}

:where(.test-page) .crossword-clues{ display: flex; flex-direction: column; gap: .8rem; }
/* Направление – своя карточка: на телефоне поля идут одной лентой, и без рамки
   не видно, где кончилось «по горизонтали» и началось «по вертикали». */
:where(.test-page) .crossword-group{
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface);
    padding: .7rem .8rem;
}
:where(.test-page) .crossword-head{
    margin: 0 0 .6rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--app-border);
    font-weight: 600;
    color: var(--app-muted);
}
:where(.test-page) .crossword-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
/* list-style на самом пункте, а не только на списке: у pico своё правило на
   `li`, и оно перебивало сброс на `ul` – перед каждой загадкой стоял квадратик
   маркера. Разделяет загадки линия, а не маркеры. */
:where(.test-page) .clue{ list-style: none; margin: 0; }
:where(.test-page) .clue + .clue{ padding-top: .7rem; border-top: 1px solid var(--app-border); }
:where(.test-page) .clue-text{ margin: 0 0 .3rem; }
/* Поля одной ширины у всех загадок: поле по длине слова превращало колонку в
   рваную лесенку, а длина ответа и так видна по клеткам в сетке и ограничена
   maxlength. Ширину полям задаёт pico, поэтому селектор здесь на класс
   больше. */
:where(.test-page) .crossword .clue-input{
    width: 12rem;
    max-width: 100%;
    margin: 0;
    text-transform: uppercase;
}
:where(.test-page) .crossword .answer-note{ text-align: left; }

/* Широкий экран: сетка и загадки рядом, у списка загадок своя прокрутка –
   разгадывание это сверка загадки с клетками, и держать их врозь значит
   заставить крутить панель на каждое слово. */
@media (min-width: 900px) {
    :where(.test-page) .crossword{
        --cw-cell: 2.4rem;
        display: grid;
        /* У колонки загадок свой минимум: без него сетка из двадцати клеток
           забирала всю ширину по max-content, а колонка полей сжималась в
           ноль – на нешироком окне отвечать было нечем. Сетка в этом случае
           уступает и прокручивается вбок, как на телефоне. */
        grid-template-columns: minmax(0, auto) minmax(min(18rem, 100%), 1fr);
        gap: 1.4rem;
        align-items: start;
        flex: 1 1 auto;
    }
    :where(.test-page) .crossword-clues{ overflow-y: auto; min-height: 0; max-height: 100%; }
}

/* Карточки ---------------------------------------------------------------- */

/* Колонки и высоту строки расставляет JS: он знает и число карточек, и место
   на экране, и сколько места просит текст внутри, поэтому раскладывает их
   ровно (6 карточек – 3 + 3, а не 5 + 1) и растит до края. Переменные ниже –
   рамки, в которых он это делает: min – предел читаемости, max – предел, за
   которым карточка не крупная, а раздутая. Правила здесь работают, пока JS
   не посчитал (и без него).

   safe center: пока сетка помещается – она по центру, а если карточек с
   длинным текстом больше, чем влезает, выравнивание падает на начало и
   верхний ряд не срезается за краем. */
:where(.test-page) .cards{
    --card-min-w: 120px;
    --card-min-h: 76px;
    --card-max-w: 260px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    grid-auto-rows: minmax(var(--card-min-h), auto);
    align-content: safe center;
    justify-content: center;
    gap: .7rem;
}


/* Обе стороны карточки лежат в одной ячейке grid, поэтому высота считается
   по большей из них заранее и при перевороте не меняется. Фиксированной
   высоты нет: карточка растёт под содержимое, а в пределах строки сетки все
   карточки выравниваются по самой высокой. */
:where(.test-page) .card{
    display: block;
    width: 100%;
    height: 100%;
    min-height: var(--card-min-h, 104px);
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    perspective: 900px;
    cursor: pointer;
}
:where(.test-page) .card-inner{
    display: grid;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform .45s;
}
:where(.test-page) .card-face{
    grid-area: 1 / 1;
    display: grid;
    place-items: center;
    padding: .6rem;
    text-align: center;
    font-size: 1rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
    hyphens: auto;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface);
    color: var(--app-text);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
/* Оборот замешан на акценте: так он заведомо отличается и от лицевой стороны,
   и от фона страницы в любой теме – --app-surface-2 сливался с фоном. */
:where(.test-page) .card-back{
    transform: rotateY(180deg);
    background: color-mix(in srgb, var(--app-accent) 18%, var(--app-surface));
    border-color: color-mix(in srgb, var(--app-accent) 45%, var(--app-border));
}

:where(.test-page) .card[aria-pressed="true"] .card-inner{ transform: rotateY(180deg); }
/* Режим RU-EN: все карточки перевёрнуты, а нажатая – наоборот, лицом вверх. */
:where(.test-page) .task.inverted .card-inner{ transform: rotateY(180deg); }
:where(.test-page) .task.inverted .card[aria-pressed="true"] .card-inner{ transform: rotateY(0deg); }

/* На полноэкранной вёрстке карточка крупнее в полтора раза: она здесь главное
   содержимое страницы, и место должно уходить на неё, а не на пустоту.
   Блок идёт после базовых правил карточки – иначе они перебили бы его
   по порядку каскада. */
@media (min-width: 1024px) {
    :where(.test-page) .cards{
        --card-min-w: 150px;
        --card-min-h: 96px;
        --card-max-w: 420px;
        gap: 1.1rem;
    }
    :where(.test-page) .card-face{ font-size: 1.2rem; padding: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    :where(.test-page) .card-inner{ transition: none; }
}

/* Интерактивное сопоставление -------------------------------------------- */

:where(.test-page) .pairs-status{ color: var(--app-muted); font-size: .9rem; }
:where(.test-page) .pairs-status[data-done="true"]{ color: var(--app-ok); font-weight: 600; }

/* Оба столбца делят высоту тела поровну – строки слева и справа стоят
   друг напротив друга, потому что слов в столбцах поровну. */
:where(.test-page) .pairs{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    align-items: stretch;
}
:where(.test-page) .pairs-col{ display: flex; flex-direction: column; gap: .5rem; }
:where(.test-page) .pair-item{
    width: 100%;
    margin: 0;
    min-height: 44px;
    padding: .5rem .7rem;
    text-align: left;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface);
    color: var(--app-text);
    font-size: .95rem;
}
:where(.test-page) .pair-item[aria-pressed="true"]{
    border-color: var(--app-accent);
    background: color-mix(in srgb, var(--app-accent) 14%, var(--app-surface));
}
:where(.test-page) .pair-item[data-matched="true"]{
    border-color: var(--app-ok);
    background: color-mix(in srgb, var(--app-ok) 16%, var(--app-surface));
    cursor: default;
}
:where(.test-page) .pair-item[data-wrong="true"]{
    border-color: var(--app-bad);
    background: color-mix(in srgb, var(--app-bad) 16%, var(--app-surface));
}

/* Нижняя навигация и модалка --------------------------------------------- */

/* Панель прижата к нижнему краю окна во всю ширину: на коротком тесте она не
   должна обрываться посреди страницы. Нижний отступ учитывает домашнюю
   полосу iPhone – вьюпорт объявлен с viewport-fit=cover. */
:where(.test-page) .task-nav{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
    padding: .7rem 0;
    padding-bottom: calc(.7rem + env(safe-area-inset-bottom, 0px));
    background: var(--app-header-bg);
    border-top: 1px solid var(--app-border);
    box-shadow: 0 -1px 4px rgb(0 0 0 / 8%);
}
/* Фон панели во всю ширину окна, а кнопки – в той же колонке, что и задание:
   у широкого экрана иначе стрелки уезжают к самым краям, а содержимое
   остаётся в середине. Колонку задаёт тот же .container, что и у main. */
:where(.test-page) .task-nav-inner{
    display: flex;
    gap: .5rem;
    align-items: center;
}
/* Все кнопки панели одной высоты: подпись «Завершить» в одну строку как раз
   и нужна была, чтобы кнопка встала вровень с круглыми стрелками. */
:where(.test-page) .task-nav button{
    margin: 0;
    width: auto;
    height: 48px;
    padding-top: 0;
    padding-bottom: 0;
}

/* Стрелки – круглые и спокойные: это перелистывание, а не действие,
   ради которого ученик сюда пришёл. Фон отличается от фона страницы,
   иначе кнопку не видно. */
:where(.test-page) .task-nav .nav-arrow{
    flex: 0 0 48px;
    width: 48px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--app-border);
    background: var(--app-surface-2);
    color: var(--app-text);
    font-size: 1.6rem;
    line-height: 1;
}
:where(.test-page) .task-nav .nav-arrow:disabled{ opacity: .4; }

/* Кнопка отправки загорается акцентом, только когда заполнены все
   оцениваемые задания: раньше жать на неё незачем. */
:where(.test-page) .task-nav .submit-btn{
    flex: 1 1 auto;
    border: 1px solid var(--app-border);
    background: var(--app-surface-2);
    color: var(--app-text);
}
:where(.test-page) .task-nav .submit-btn[data-complete="true"]{
    border-color: var(--app-accent);
    background: var(--app-accent);
    color: var(--app-accent-contrast);
}

/* Место под панель, чтобы она не закрывала последнюю задачу. */
:where(.test-page) #test-root > main{ padding-bottom: 6rem; }

@media (min-width: 640px) {
    :where(.test-page) .task-nav .submit-btn{ flex: 0 0 auto; margin-left: auto; min-width: 10rem; }
}

:where(.test-page) #submit-dialog article{ margin: 0; }
:where(.test-page) .dialog-actions{ display: flex; gap: .5rem; justify-content: flex-end; }
:where(.test-page) .dialog-actions button{ width: auto; margin: 0; }

/* Результат --------------------------------------------------------------- */

:where(.test-page) .result-card{
    border-left: 4px solid var(--app-accent);
    margin-bottom: 1rem;
    background: var(--app-surface);
    color: var(--app-text);
    border-color: var(--app-border);
}
:where(.test-page) .result-card h2{ color: var(--app-text); }
:where(.test-page) .result-meta{ margin: 0; }
:where(.test-page) .result-meta div{ display: flex; flex-wrap: wrap; gap: .5rem; padding: .15rem 0; }
:where(.test-page) .result-meta dt{ font-weight: 400; color: var(--app-muted); min-width: 8.5rem; margin: 0; }
:where(.test-page) .result-meta dd{ margin: 0; }
:where(.test-page) .result-score{ font-size: 1.1rem; }
:where(.test-page) .result-pending{ color: var(--app-pending); }

/* Ряды вкладок и кружков прокручиваются вбок, но полосу не показывают:
   она съедает высоту и мешает читать. */
:where(.test-page) .cat-tabs, :where(.test-page) .dots{
    scrollbar-width: none;
    -ms-overflow-style: none;
}
:where(.test-page) .cat-tabs::-webkit-scrollbar, :where(.test-page) .dots::-webkit-scrollbar{ width: 0; height: 0; display: none; }

/* Края прокрутки растворяются в фоне: градиент маски и лёгкое размытие, без линии. */
.test-page .scroll-fade{ position: relative; }
.test-page .scroll-fade::before,
.test-page .scroll-fade::after{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: 1.5rem;
    pointer-events: none;
    opacity: 0;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.test-page .scroll-fade::before{
    left: 0;
    background: linear-gradient(to right, color-mix(in srgb, var(--app-bg) 72%, transparent), transparent);
    -webkit-mask-image: linear-gradient(to right, #000, transparent);
    mask-image: linear-gradient(to right, #000, transparent);
}
.test-page .scroll-fade::after{
    right: 0;
    background: linear-gradient(to left, color-mix(in srgb, var(--app-bg) 72%, transparent), transparent);
    -webkit-mask-image: linear-gradient(to left, #000, transparent);
    mask-image: linear-gradient(to left, #000, transparent);
}
.test-page .scroll-fade[data-fade-left="true"]::before,
.test-page .scroll-fade[data-fade-right="true"]::after{ opacity: 1; }


/* Картинка группы заданий ------------------------------------------------ */

:where(.test-page) .cat-image{
    position: relative;
    margin: .75rem 0 0;
    max-height: 45vh;
    width: 100%;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    overflow: hidden;
    background: var(--app-surface, transparent);
}
:where(.test-page) .cat-image img{
    display: block;
    width: 100%;
    height: 100%;
    max-height: 45vh;
    object-fit: contain;
}
:where(.test-page) .cat-image-caption{
    margin: 0;
    padding: .35rem .6rem;
    font-size: .8rem;
    color: var(--app-muted, var(--app-text));
    opacity: .75;
    border-top: 1px solid var(--app-border);
}
:where(.test-page) .cat-image-zoom{
    position: absolute;
    top: .4rem;
    right: .4rem;
    z-index: 2;
    box-sizing: border-box;
    width: 2.75rem;
    height: 2.75rem;
    min-width: 2.75rem;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--app-radius);
    /* Pico красит текст кнопки в --pico-primary-inverse; без своего цвета
       стрелка пропадает на светлом фоне в обеих темах. */
    color: var(--app-text);
    background: color-mix(in srgb, var(--app-bg, #fff) 82%, transparent);
    border: 1px solid var(--app-border);
    box-shadow: 0 .15rem .45rem rgb(0 0 0 / .22);
    line-height: 1;
    font-size: 1.1rem;
}
:where(.test-page) .cat-image-error{
    margin: 0;
    padding: .75rem;
    text-align: center;
    color: var(--app-muted);
    font-size: .9rem;
}

/* Скелет с бликом, пока картинка грузится */
:where(.test-page) .cat-image[data-loading]::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        110deg,
        transparent 25%,
        color-mix(in srgb, var(--app-text) 8%, transparent) 45%,
        transparent 65%
    );
    background-size: 200% 100%;
    animation: cat-image-shimmer 1.6s ease-in-out infinite;
    pointer-events: none;
}
:where(.test-page) .cat-image[data-loading] img{ opacity: 0; }
:where(.test-page) .cat-image:not([data-loading]) img{ opacity: 1; transition: opacity .2s; }

@keyframes cat-image-shimmer {
    0% { background-position: 120% 0; }
    60% { background-position: -20% 0; }
    100% { background-position: -20% 0; }
}

@media (prefers-reduced-motion: reduce) {
    :where(.test-page) .cat-image[data-loading]::before{
        animation: none;
        background: color-mix(in srgb, var(--app-text) 6%, transparent);
    }
}

/* Полноэкранный просмотрщик */
:where(.test-page) .image-viewer{
    border: none;
    padding: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    background: rgba(0, 0, 0, .92);
    color: #fff;
    display: flex;
    flex-direction: column;
    touch-action: none;
}
:where(.test-page) .image-viewer::backdrop{ background: rgba(0, 0, 0, .85); }
:where(.test-page) .image-viewer-stage{
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    touch-action: none;
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
}
:where(.test-page) .image-viewer-stage:active{ cursor: grabbing; }
:where(.test-page) .image-viewer-stage img{
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transform-origin: center;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}
.test-page .image-viewer button{
    width: auto;
    min-width: 2.6rem;
    height: 2.6rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    background-color: transparent;
    box-shadow: none;
    color: #fff;
    font-size: 1.7rem;
    line-height: 1;
}
.test-page .image-viewer button:is(:hover, :active, :focus, :focus-visible){
    background: transparent;
    background-color: transparent;
    border: 0;
    box-shadow: none;
    outline: none;
    color: #fff;
}
.test-page .image-viewer-close{
    position: absolute;
    top: .65rem;
    right: .75rem;
    z-index: 2;
    font-size: 2.1rem;
}
.test-page .image-viewer-zoom{
    position: absolute;
    left: 0;
    right: 0;
    bottom: .45rem;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 1.4rem;
    margin: 0;
    padding: 0;
    pointer-events: none;
}
.test-page .image-viewer-zoom button{ pointer-events: auto; }
:where(.test-page) .image-viewer-caption{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 3.2rem;
    z-index: 2;
    margin: 0;
    padding: .35rem 1rem;
    text-align: center;
    background: transparent;
    color: #fff;
    text-shadow: 0 1px 3px rgb(0 0 0 / .8);
    font-size: .9rem;
}

/* «О тесте» входит в поток страницы под шапкой, а не ложится поверх. */
.test-page .about-toggle {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--app-muted);
    font: inherit;
    font-size: .85rem;
    cursor: pointer;
}
/* Контурная галочка, как у details в прежней странице: свёрнуто – вбок,
   раскрыто – вниз. Без заливки. */
.test-page .about-toggle::after {
    content: "";
    width: .4rem;
    height: .4rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .16s ease;
}
.test-page .about-toggle[aria-expanded="true"]::after {
    transform: rotate(45deg);
}
.test-page .about-toggle:focus,
.test-page .about-toggle:focus-visible {
    outline: none;
    box-shadow: none;
}
.test-page .about-reveal {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .22s ease;
}
.test-page .about-reveal-open { grid-template-rows: 1fr; }
.test-page .about-reveal > div { overflow: hidden; }
.test-page .about-panel {
    position: relative;
    margin: 0 0 .45rem;
    padding: .75rem 2.6rem .75rem .9rem;
    border-radius: var(--app-radius, .6rem);
    background: color-mix(in srgb, var(--app-accent) 18%, var(--app-surface));
    border: 1px solid color-mix(in srgb, var(--app-accent) 42%, var(--app-border));
    color: var(--app-text);
    white-space: pre-wrap;
}
.test-page .about-close {
    position: absolute;
    top: .4rem;
    right: .4rem;
    width: 2.1rem;
    height: 2.1rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: .45rem;
    background: color-mix(in srgb, var(--app-text) 8%, transparent);
    color: var(--app-text);
    font-size: 1.45rem;
    line-height: 1;
    cursor: pointer;
}
.test-page .about-close:hover { background: color-mix(in srgb, var(--app-text) 14%, transparent); }
.test-page .hint { color: var(--app-muted); font-size: .9rem; text-align: center; margin: .2rem 0 0; }
.test-page .chip-dragging,
.test-page .chip-wrap:has(.chip-dragging) {
    position: relative;
    z-index: 3;
    pointer-events: none;
}
.test-page .chip-dragging {
    border-color: var(--app-accent);
    box-shadow: 0 .35rem .8rem rgb(0 0 0 / .25);
}
.test-page .tool-btn {
    background: transparent;
    color: var(--app-text);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius, .6rem);
}
.test-page .panel-fade { animation: test-fade-in .18s ease; }
@keyframes test-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
.test-page #submit-dialog {
    border: 0;
    padding: 0;
    background: transparent;
    max-width: min(92vw, 32rem);
}
.test-page #submit-dialog article {
    margin: 0;
    padding: 1.1rem 1.2rem;
    background: var(--app-surface);
    color: var(--app-text);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius, .6rem);
}
.test-page #submit-dialog::backdrop { background: rgb(0 0 0 / .45); }
@media (prefers-reduced-motion: reduce) {
    .test-page .about-reveal,
    .test-page .panel-fade { transition: none; animation: none; }
}
.test-page > main { padding-top: 0; padding-bottom: 6rem; }
.test-page .app-header-inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem .8rem;
}
.test-page .test-title { margin: 0; min-width: 0; }
.test-page .app-header-sub { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.test-page .container {
    box-sizing: border-box;
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--app-gap-m, 1rem);
}
@media (min-width: 48rem) {
    .test-page .container { padding-inline: var(--app-gap-xl, 2.5rem); }
}
@media (min-width: 576px) { .test-page .container { max-width: 510px; } }
@media (min-width: 768px) { .test-page .container { max-width: 700px; } }
@media (min-width: 1024px) { .test-page .container { max-width: 950px; } }
@media (min-width: 1280px) { .test-page .container { max-width: 1200px; } }
@media (min-width: 1536px) { .test-page .container { max-width: 1450px; } }
.test-page #submit-dialog button {
    min-height: 2.6rem;
    margin: 0;
    padding: .35rem .9rem;
    border-radius: var(--app-radius, .6rem);
    border: 1px solid var(--app-border);
    background: var(--app-surface-2);
    color: var(--app-text);
}
.test-page #submit-dialog footer button:last-child {
    background: var(--app-accent);
    border-color: var(--app-accent);
    color: var(--app-accent-contrast);
}

/* Те же переменные, что у кабинета: без них шрифт, скругления и шапка
   разваливаются – на :root их нет, они жили только на .cabinet-page. */
.test-page {
    --app-font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --app-radius: .6rem;
    --app-radius-lg: 1rem;
    --app-gap-s: .6rem;
    --app-gap-m: 1rem;
    --app-gap-l: 1.5rem;
    --app-gap-xl: 2.5rem;
    --app-shadow-color: var(--app-shadow);
    --app-shadow-lg: 0 6px 14px var(--app-shadow-color), 0 16px 36px var(--app-shadow-color);
    --app-header-text: var(--app-text);
    --pico-border-radius: var(--app-radius);
    --pico-background-color: var(--app-bg);
    --pico-color: var(--app-text);
    --pico-primary: var(--app-accent);
    --pico-primary-background: var(--app-accent);
    --pico-primary-border: var(--app-accent);
    --pico-primary-hover-background: var(--app-accent);
    --pico-primary-inverse: var(--app-accent-contrast);
    --pico-muted-color: var(--app-muted);
    --pico-muted-border-color: var(--app-border);
    --pico-form-element-background-color: var(--app-surface);
    --pico-form-element-active-background-color: var(--app-surface);
    --pico-form-element-border-color: var(--app-border);
    --pico-form-element-color: var(--app-text);
    --pico-form-element-placeholder-color: var(--app-muted);
    --pico-font-family: "Onest", system-ui, sans-serif;
    font-family: "Onest", system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}
.test-page,
:root .test-page,
:root:not([data-theme]) .test-page,
:root[data-theme] .test-page {
    accent-color: var(--app-accent);
    --pico-primary: var(--app-accent);
    --pico-primary-background: var(--app-accent);
    --pico-primary-border: var(--app-accent);
    --pico-primary-hover: var(--app-accent);
    --pico-primary-hover-background: var(--app-accent);
    --pico-primary-inverse: var(--app-accent-contrast);
    --pico-primary-focus: color-mix(in srgb, var(--app-accent) 40%, transparent);
    --pico-color: var(--app-text);
    --pico-background-color: var(--app-bg);
    --pico-muted-color: var(--app-muted);
    --pico-muted-border-color: var(--app-border);
    --pico-border-radius: var(--app-radius);
    --pico-form-element-background-color: var(--app-surface);
    --pico-form-element-active-background-color: var(--app-surface);
    --pico-form-element-selected-background-color: var(--app-surface-2);
    --pico-form-element-border-color: var(--app-border);
    --pico-form-element-color: var(--app-text);
    --pico-form-element-placeholder-color: var(--app-muted);
    --pico-h1-color: var(--app-text);
    --pico-h2-color: var(--app-text);
    --pico-h3-color: var(--app-text);
    --pico-card-background-color: var(--app-surface);
    --pico-card-sectioning-background-color: var(--app-surface-2);
    --pico-card-border-color: var(--app-border);
    --pico-form-element-active-border-color: var(--app-accent);
    --pico-form-element-focus-color: var(--app-accent);
    --pico-font-family: "Onest", system-ui, sans-serif;
}
.test-page .app-header {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 0;
    margin-bottom: .45rem;
    color: var(--app-header-text);
    background: color-mix(in srgb, var(--app-bg) 55%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--app-text) 16%, transparent);
    box-shadow:
        0 1px 0 color-mix(in srgb, #fff 45%, transparent),
        0 .7rem 1.5rem rgb(45 41 57 / 9%);
    backdrop-filter: blur(16px) saturate(1.12);
    -webkit-backdrop-filter: blur(16px) saturate(1.12);
}
.test-page .app-menu [role="button"] {
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: inherit;
}
.test-page .app-menu [role="button"]:is(:hover, :active, :focus) {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: inherit;
}

/* Строки меню – один и тот же отступ. Pico добавляет select поля снизу,
   из-за этого «Фон» отъезжал от цветов. */
.app-menu-panel > .app-menu-item,
.app-menu-panel > .app-menu-block {
    margin: 0;
    padding: .4rem 1rem;
}
.app-menu-panel label {
    display: flex;
    align-items: center;
    gap: .45rem;
    width: 100%;
    margin: 0;
}
.app-menu-panel label select,
.app-menu-panel select {
    flex: 1 1 auto;
    width: auto;
    height: 2rem;
    min-height: 0;
    margin: 0;
    padding: .15rem 1.5rem .15rem .45rem;
}
.test-page .task-nav {
    background: color-mix(in srgb, var(--app-bg) 70%, transparent);
    border-top: 1px solid color-mix(in srgb, var(--app-text) 14%, transparent);
    box-shadow: 0 -.5rem 1.2rem rgb(45 41 57 / 8%);
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
}