/* =========================================================
   ВИНИЛОВЫЙ ПРОИГРЫВАТЕЛЬ. СТИЛЬ.
   Часть 2 — ДОПОЛНИТЕЛЬНЫЕ ТЕМЫ

   theme 1 = Восточная акварель
   theme 2 = Морской свет
   theme 3 = Советское ретро

   Здесь задаются только значения, отличающиеся
   от основной темы.
   Структура разделов совпадает с основным файлом.
   
   Создан с помощью ChatGPT Kolobdur74.
   ========================================================= */


/* =========================================================
   THEME 1 — ВОСТОЧНАЯ АКВАРЕЛЬ
   ========================================================= */

.audio-vinyl.audio-theme-1 {

    /* =====================================================
       ОСНОВНЫЕ ЦВЕТА
       ===================================================== */

    /* Основной цвет светлой бумажной основы. */
    --av-paper: #fbf3df;

    /* Дополнительный оттенок бумаги. */
    --av-paper-2: #f3e5c5;

    /* Основной золотистый цвет элементов. */
    --av-gold: #b58a4a;

    /* Светлый оттенок золота для тонких границ. */
    --av-gold-light: #dfc38b;

    /* Тёмный оттенок золота для акцентов. */
    --av-gold-dark: #80602f;

    /* Основной нефритовый цвет интерактивных элементов. */
    --av-jade: #5b8d82;

    /* Тёмный оттенок нефрита. */
    --av-jade-dark: #3f7068;

    /* Акцентный красноватый цвет. */
    --av-red: #b96b5b;

    /* Основной цвет текста. */
    --av-text: #574635;

    /* Приглушённый цвет второстепенного текста. */
    --av-muted: #947d62;


    /* =====================================================
       ПРОГРЕСС
       ===================================================== */

    /* Цвет незаполненной части шкалы прогресса. */
    --av-progress-track: #dbc9a4;

    /* Цвет заполненной части шкалы прогресса. */
    --av-progress-fill: #6d9b8f;


    /* =====================================================
       РАЗМЕРЫ
       ===================================================== */

    /* Максимальная ширина проигрывателя. */
    --av-width: 760px;

    /* Общая высота проигрывателя. */
    --av-height: 255px;

    /* Ширина левой панели с кнопками. */
    --av-controls-width: 68px;

    /* Ширина центральной части с пластинкой. */
    --av-deck-width: 285px;

    /* Диаметр виниловой пластинки. */
    --av-disc-size: 188px;


    /* =====================================================
       ШРИФТЫ
       ===================================================== */

    /* Шрифт интерфейсных элементов. */
    --av-font-ui: "Segoe UI", Arial, sans-serif;

    /* Шрифт китайского / декоративного текста. */
    --av-font-cn: "Noto Serif SC", "Songti SC", "SimSun", serif;


    /* =====================================================
       РАЗМЕРЫ ТЕКСТА И ЭЛЕМЕНТОВ
       ===================================================== */

    /* Размер названия композиции. */
    --av-title-size: 18px;

    /* Размер декоративного символа перед названием. */
    --av-mark-size: 19px;

    /* Размер основного текста подписи.
       0px = собственный текст подписи скрыт. */
    --av-caption-size: 0px;

    /* Размер текста исполнителя,
       выводимого через ::after. */
    --av-caption-after-size: 10px;

    /* Размер времени воспроизведения. */
    --av-time-size: 9px;

    /* Размер символов кнопок управления. */
    --av-button-size: 17px;

    /* Размер символа кнопки громкости. */
    --av-volume-icon-size: 24px;

    /* Ширина кнопок управления. */
    --av-button-width: 40px;

    /* Высота кнопок управления. */
    --av-button-height: 40px;

    /* Ширина ползунка громкости. */
    --av-volume-width: 78px;


    /* =====================================================
       ДЕКОРАТИВНЫЕ ИЗОБРАЖЕНИЯ
       ===================================================== */

    /* Фоновое изображение правой информационной части. */
    --av-info-background-image: url(https://forumstatic.ru/files/001a/ad/c5/29373.png);

    /* Положение фонового изображения. */
    --av-info-background-position: right center;

    /* Размер фонового изображения. */
    --av-info-background-size: cover;


    /* =====================================================
       СИМВОЛЫ
       ===================================================== */

    /* Символ кнопки «Плей». */
    --av-play-icon: '\25b6';

    /* Символ кнопки «Пауза». */
    --av-pause-icon: '\23f8';

    /* Символ кнопки «Стоп». */
    --av-stop-icon: '\25a0';

    /* Символ кнопки смены изображения пластинки. */
    --av-cover-icon: '\21c4';

    /* Декоративный символ перед названием композиции. */
    --av-title-icon: '\266b';

    /* Текст подписи под названием композиции. */
    --av-caption-text: 'music · \97F3\4E50';


    /* =====================================================
       ОБЩАЯ ГЕОМЕТРИЯ
       ===================================================== */

    /* Используется CSS Grid вместо Flexbox. */
    --av-display: grid;

    /* Три колонки: управление, пластинка и информация. */
    --av-grid-columns:
        var(--av-controls-width)
        var(--av-deck-width)
        minmax(0, 1fr);

    /* Фиксированная высота карточки. */
    --av-card-height: var(--av-height);

    /* Минимальная высота карточки. */
    --av-card-min-height: var(--av-height);

    /* Фон всей карточки проигрывателя. */
    --av-card-background:
        linear-gradient(
            135deg,
            #fffaf0 0%,
            var(--av-paper) 55%,
            #f0dfbc 100%
        );

    /* Граница всей карточки. */
    --av-card-border: 1px solid #d8c49d;

    /* Скругление углов карточки. */
    --av-card-radius: 4px;

    /* Тень карточки и внутренняя подсветка. */
    --av-card-shadow:
        0 1px 0 rgba(255,255,255,.9) inset,
        0 3px 8px rgba(80,55,25,.10);


    /* =====================================================
       ЛЕВАЯ ПАНЕЛЬ
       ===================================================== */

    /* Flex-размер не используется при CSS Grid. */
    --av-controls-flex: none;

    /* Левая панель занимает первую колонку Grid. */
    --av-controls-grid-column: 1;

    /* Фон панели управления. */
    --av-controls-background:
        linear-gradient(
            180deg,
            #f1e4c8,
            #e6d3ad
        );

    /* Правая граница панели управления. */
    --av-controls-border-right: 1px solid #cdb486;

    /* Расстояние между кнопками. */
    --av-controls-gap: 9px;


    /* =====================================================
       КНОПКИ
       ===================================================== */

    /* Граница кнопок управления. */
    --av-button-border: 1px solid #c9b27e;

    /* Фон кнопок. */
    --av-button-background:
        linear-gradient(
            145deg,
            #fffaf0,
            #e5d3aa
        );

    /* Цвет символов кнопок. */
    --av-button-color: var(--av-gold-dark);

    /* Тень кнопок и внутренняя подсветка. */
    --av-button-shadow:
        0 3px 6px rgba(86,61,28,.16),
        inset 0 1px 0 rgba(255,255,255,.9);

    /* Размер собственного текста кнопки.
       0 = используется символ из переменной icon. */
    --av-button-font-size: 0;

    /* Высота строки символа внутри кнопки. */
    --av-button-line-height: 1;

    /* Внутренний отступ кнопки. */
    --av-button-padding: 0;

    /* Фон кнопки при наведении курсора. */
    --av-button-hover-background:
        linear-gradient(
            145deg,
            #fffaf0,
            #e5d3aa
        );

    /* Цвет границы кнопки при наведении. */
    --av-button-hover-border: #c9b27e;


    /* =====================================================
       ЦЕНТРАЛЬНАЯ ЧАСТЬ
       ===================================================== */

    /* Flex-размер не используется при CSS Grid. */
    --av-deck-flex: none;

    /* Центральная часть занимает вторую колонку Grid. */
    --av-deck-grid-column: 2;

    /* Центральная часть растягивается на всю высоту карточки. */
    --av-deck-height: 100%;

    /* Фон площадки с пластинкой. */
    --av-deck-background:
        linear-gradient(
            145deg,
            #e7d9b8,
            #d5bf91
        );

    /* Правая граница центральной части. */
    --av-deck-border-right:
        1px solid #c7ae7b;


    /* =====================================================
       ВНУТРЕННЯЯ РАМКА
       ===================================================== */

    /* Отступ рамки слева. */
    --av-frame-left: 13px;

    /* Отступ рамки справа. */
    --av-frame-right: 13px;

    /* Отступ рамки сверху. */
    --av-frame-top: 14px;

    /* Отступ рамки снизу. */
    --av-frame-bottom: 14px;

    /* Граница внутренней рамки. */
    --av-frame-border: 1px solid #bda674;

    /* Скругление внутренней рамки. */
    --av-frame-radius: 15px;

    /* Фон внутренней рамки. */
    --av-frame-background:
        linear-gradient(
            145deg,
            #f6edd9,
            #d8c29a
        );

    /* Внутренняя подсветка и мягкая тень рамки. */
    --av-frame-shadow:
        inset 0 1px 0 rgba(255,255,255,.8),
        inset 0 -8px 20px rgba(100,70,30,.08);


    /* =====================================================
       ПЛАСТИНКА
       ===================================================== */

    /* Толщина и цвет границы пластинки. */
    --av-disc-border: 4px solid #bba26f;

    /* Тень пластинки. */
    --av-disc-shadow: 0 3px 7px rgba(80,55,20,.18);

    /* Основной цвет пластинки под изображением. */
    --av-disc-background-color: #181614;

    /* Изображение поверхности пластинки. */
    --av-record-image: url(https://forumstatic.ru/files/001a/ad/c5/20459.png);


    /* =====================================================
       ТОНАРМ
       ===================================================== */

    /* Фон круглого основания тонарма. */
    --av-pivot-background: #d5bd89;

    /* Граница основания тонарма. */
    --av-pivot-border: 2px solid #896a36;

    /* Тень основания тонарма. */
    --av-pivot-shadow: 0 2px 5px rgba(50,30,10,.25);

    /* Фон металлического рычага тонарма. */
    --av-arm-background:
        linear-gradient(
            90deg,
            #80643a,
            #d2b878,
            #80643a
        );

    /* Фон головки / картриджа тонарма. */
    --av-cartridge-background: #60462d;

    /* Цвет иглы. */
    --av-stylus-background: #392b1d;


    /* =====================================================
       ПРАВАЯ ЧАСТЬ
       ===================================================== */

    /* Flex-размер не используется при CSS Grid. */
    --av-info-flex: none;

    /* Правая информационная часть занимает третью колонку Grid. */
    --av-info-grid-column: 3;

    /* Внутренние отступы информационной части. */
    --av-info-padding: 28px 30px;

    /* Основной цвет фона информационной части. */
    --av-info-background-color: #f8efd9;

    /* Показывать дополнительный декоративный слой. */
    --av-info-overlay-display: block;

    /* Ширина декоративного слоя. */
    --av-info-overlay-width: 62%;

    /* Градиент декоративного слоя поверх фонового изображения. */
    --av-info-overlay-background:
        linear-gradient(
            90deg,
            rgba(251,243,223,.98),
            rgba(251,243,223,.78),
            rgba(251,243,223,0)
        );


    /* =====================================================
       ЗАГОЛОВОК И ТЕКСТ
       ===================================================== */

    /* Шрифт названия композиции. */
    --av-title-font-family: var(--av-font-cn);

    /* Насыщенность шрифта названия. */
    --av-title-weight: 600;

    /* Межбуквенный интервал названия. */
    --av-title-letter-spacing: .02em;

    /* Шрифт декоративного символа перед названием. */
    --av-mark-font-family: serif;

    /* Цвет декоративного символа. */
    --av-mark-color: var(--av-red);

    /* Межбуквенный интервал подписи исполнителя. */
    --av-caption-letter-spacing: .16em;


    /* =====================================================
       ПОЛЗУНОК И ГРОМКОСТЬ
       ===================================================== */

    /* Цвет бегунка шкалы прогресса. */
    --av-progress-thumb-background: #fffaf0;

    /* Граница бегунка шкалы прогресса. */
    --av-progress-thumb-border: 2px solid var(--av-jade);

    /* Тень бегунка. */
    --av-progress-thumb-shadow: none;

    /* Цвет символа кнопки громкости. */
    --av-volume-button-color: var(--av-jade);
}


/* =========================================================
   THEME 2 — МОРСКОЙ СВЕТ
   ========================================================= */

.audio-vinyl.audio-theme-2 {

    /* =====================================================
       ОСНОВНЫЕ ЦВЕТА
       ===================================================== */

    /* Основной цвет светлой основы. */
    --av-paper: #f8fafc;

    /* Дополнительный холодный оттенок бумаги. */
    --av-paper-2: #edf2f5;

    /* Основной серебристо-серый цвет элементов. */
    --av-gold: #aab8c0;

    /* Светлый оттенок границ. */
    --av-gold-light: #dbe3e7;

    /* Тёмный оттенок элементов. */
    --av-gold-dark: #6d7c86;

    /* Основной голубовато-морской цвет. */
    --av-jade: #5a9daa;

    /* Тёмный оттенок морского цвета. */
    --av-jade-dark: #397c88;

    /* Акцентный красновато-коралловый цвет. */
    --av-red: #d28b80;

    /* Основной цвет текста. */
    --av-text: #35434e;

    /* Приглушённый цвет второстепенного текста. */
    --av-muted: #8998a2;


    /* =====================================================
       ПРОГРЕСС
       ===================================================== */

    /* Цвет незаполненной части шкалы. */
    --av-progress-track: #dce4e8;

    /* Цвет заполненной части шкалы. */
    --av-progress-fill: #5b9fab;


    /* =====================================================
       РАЗМЕРЫ
       ===================================================== */

    /* Максимальная ширина проигрывателя. */
    --av-width: 760px;

    /* Общая высота проигрывателя. */
    --av-height: 255px;

    /* Ширина левой панели. */
    --av-controls-width: 68px;

    /* Ширина центральной части. */
    --av-deck-width: 285px;

    /* Диаметр пластинки. */
    --av-disc-size: 188px;


    /* =====================================================
       ШРИФТЫ
       ===================================================== */

    /* Шрифт интерфейсных элементов. */
    --av-font-ui: "Segoe UI", Arial, sans-serif;

    /* В этой теме декоративный шрифт заменён на интерфейсный. */
    --av-font-cn: var(--av-font-ui);


    /* =====================================================
       РАЗМЕРЫ ТЕКСТА И ЭЛЕМЕНТОВ
       ===================================================== */

    /* Размер названия композиции. */
    --av-title-size: 18px;

    /* Размер декоративного символа перед названием. */
    --av-mark-size: 19px;

    /* Размер основного текста подписи.
       0px = собственный текст подписи скрыт. */
    --av-caption-size: 0px;

    /* Размер текста исполнителя,
       выводимого через ::after. */
    --av-caption-after-size: 10px;

    /* Размер времени воспроизведения. */
    --av-time-size: 9px;

    /* Размер символов кнопок управления. */
    --av-button-size: 17px;

    /* Размер символа кнопки громкости. */
    --av-volume-icon-size: 24px;

    /* Ширина кнопок управления. */
    --av-button-width: 40px;

    /* Высота кнопок управления. */
    --av-button-height: 40px;

    /* Ширина ползунка громкости. */
    --av-volume-width: 82px;


    /* =====================================================
       ДЕКОРАТИВНЫЕ ИЗОБРАЖЕНИЯ
       ===================================================== */

    /* Фоновое изображение правой информационной части. */
    --av-info-background-image: url(https://forumstatic.ru/files/001a/ad/c5/53187.png);

    /* Положение фонового изображения. */
    --av-info-background-position: right center;

    /* Размер фонового изображения. */
    --av-info-background-size: cover;


    /* =====================================================
       СИМВОЛЫ
       ===================================================== */

    /* Символ кнопки «Плей». */
    --av-play-icon: '\25b6';

    /* Символ кнопки «Пауза». */
    --av-pause-icon: '\23f8';

    /* Символ кнопки «Стоп». */
    --av-stop-icon: '\25a0';

    /* Символ кнопки смены изображения пластинки. */
    --av-cover-icon: '\21c4';

    /* Декоративный символ перед названием композиции. */
    --av-title-icon: '\266b';

    /* Текст подписи под названием композиции. */
    --av-caption-text: 'Музыка';


    /* =====================================================
       ОБЩАЯ ГЕОМЕТРИЯ
       ===================================================== */

    /* Используется CSS Grid. */
    --av-display: grid;

    /* Три колонки: управление, пластинка и информация. */
    --av-grid-columns:
        var(--av-controls-width)
        var(--av-deck-width)
        minmax(0, 1fr);

    /* Фиксированная высота карточки. */
    --av-card-height: var(--av-height);

    /* Минимальная высота карточки. */
    --av-card-min-height: var(--av-height);

    /* Фон всей карточки. */
    --av-card-background:
        linear-gradient(
            135deg,
            #ffffff,
            #f3f7f9
        );

    /* Граница всей карточки. */
    --av-card-border: 1px solid #d8e0e4;

    /* Скругление углов карточки. */
    --av-card-radius: 4px;

    /* Тень карточки и внутренняя подсветка. */
    --av-card-shadow:
        0 1px 0 rgba(255,255,255,.9) inset,
        0 3px 8px rgba(80,55,25,.10);


    /* =====================================================
       ЛЕВАЯ ПАНЕЛЬ
       ===================================================== */

    /* Flex-размер не используется при CSS Grid. */
    --av-controls-flex: none;

    /* Левая панель занимает первую колонку Grid. */
    --av-controls-grid-column: 1;

    /* Фон панели управления. */
    --av-controls-background:
        linear-gradient(
            180deg,
            #f5f8fa,
            #e8eef1
        );

    /* Правая граница панели управления. */
    --av-controls-border-right:
        1px solid #d4dde2;

    /* Расстояние между кнопками. */
    --av-controls-gap: 9px;


    /* =====================================================
       КНОПКИ
       ===================================================== */

    /* Граница кнопок управления. */
    --av-button-border: 1px solid #d2dce1;

    /* Фон кнопок. */
    --av-button-background: #ffffff;

    /* Цвет символов кнопок. */
    --av-button-color: #647680;

    /* Тень кнопок и внутренняя подсветка. */
    --av-button-shadow:
        0 4px 10px rgba(50,70,80,.12),
        inset 0 1px 0 #fff;

    /* Размер собственного текста кнопки.
       0 = используется символ из переменной icon. */
    --av-button-font-size: 0;

    /* Высота строки символа внутри кнопки. */
    --av-button-line-height: 1;

    /* Внутренний отступ кнопки. */
    --av-button-padding: 0;

    /* Фон кнопки при наведении. */
    --av-button-hover-background: #ffffff;

    /* Цвет границы кнопки при наведении. */
    --av-button-hover-border: #d2dce1;


    /* =====================================================
       ЦЕНТРАЛЬНАЯ ЧАСТЬ
       ===================================================== */

    /* Flex-размер не используется при CSS Grid. */
    --av-deck-flex: none;

    /* Центральная часть занимает вторую колонку Grid. */
    --av-deck-grid-column: 2;

    /* Центральная часть растягивается на всю высоту карточки. */
    --av-deck-height: 100%;

    /* Фон площадки с пластинкой. */
    --av-deck-background:
        linear-gradient(
            145deg,
            #f1f4f6,
            #d9e0e4
        );

    /* Правая граница центральной части. */
    --av-deck-border-right: 1px solid #cbd5da;


    /* =====================================================
       ВНУТРЕННЯЯ РАМКА
       ===================================================== */

    /* Отступ рамки слева. */
    --av-frame-left: 13px;

    /* Отступ рамки справа. */
    --av-frame-right: 13px;

    /* Отступ рамки сверху. */
    --av-frame-top: 14px;

    /* Отступ рамки снизу. */
    --av-frame-bottom: 14px;

    /* Граница внутренней рамки. */
    --av-frame-border: 1px solid #cbd5da;

    /* Скругление внутренней рамки. */
    --av-frame-radius: 15px;

    /* Фон внутренней рамки. */
    --av-frame-background:
        linear-gradient(
            145deg,
            #fafcfd,
            #e2e8eb
        );

    /* Внутренняя подсветка и мягкая тень рамки. */
    --av-frame-shadow:
        inset 0 1px 0 #fff,
        inset 0 -8px 20px rgba(70,90,100,.08);


    /* =====================================================
       ПЛАСТИНКА
       ===================================================== */

    /* Толщина и цвет границы пластинки. */
    --av-disc-border: 4px solid #c5ced3;

    /* Тень пластинки. */
    --av-disc-shadow: 0 3px 7px rgba(80,55,20,.18);

    /* Основной цвет пластинки под изображением. */
    --av-disc-background-color: #171b1e;

    /* Изображение поверхности пластинки. */
    --av-record-image: url(https://forumstatic.ru/files/001a/ad/c5/52323.png);


    /* =====================================================
       ТОНАРМ
       ===================================================== */

    /* Фон круглого основания тонарма. */
    --av-pivot-background:
        linear-gradient(
            145deg,
            #ffffff,
            #aebbc2
        );

    /* Граница основания тонарма. */
    --av-pivot-border: 2px solid #84939c;

    /* Тень основания тонарма. */
    --av-pivot-shadow: 0 2px 5px rgba(30,50,60,.20);

    /* Фон металлического рычага тонарма. */
    --av-arm-background:
        linear-gradient(
            90deg,
            #8d9aa1,
            #eef2f4,
            #89979f
        );

    /* Фон головки / картриджа тонарма. */
    --av-cartridge-background: #465760;

    /* Цвет иглы. */
    --av-stylus-background: #26343b;


    /* =====================================================
       ПРАВАЯ ЧАСТЬ
       ===================================================== */

    /* Flex-размер не используется при CSS Grid. */
    --av-info-flex: none;

    /* Правая информационная часть занимает третью колонку Grid. */
    --av-info-grid-column: 3;

    /* Внутренние отступы информационной части. */
    --av-info-padding: 28px 30px;

    /* Основной цвет фона информационной части. */
    --av-info-background-color: #f8fafb;

    /* Показывать дополнительный декоративный слой. */
    --av-info-overlay-display: block;

    /* Ширина декоративного слоя. */
    --av-info-overlay-width: 62%;

    /* Градиент декоративного слоя поверх фонового изображения. */
    --av-info-overlay-background:
        linear-gradient(
            90deg,
            rgba(248,250,251,.99),
            rgba(248,250,251,.82),
            rgba(248,250,251,0)
        );


    /* =====================================================
       ЗАГОЛОВОК И ТЕКСТ
       ===================================================== */

    /* Шрифт названия композиции. */
    --av-title-font-family: var(--av-font-ui);

    /* Насыщенность шрифта названия. */
    --av-title-weight: 600;

    /* Межбуквенный интервал названия. */
    --av-title-letter-spacing: .015em;

    /* Шрифт декоративного символа перед названием. */
    --av-mark-font-family: serif;

    /* Цвет декоративного символа. */
    --av-mark-color: var(--av-jade);

    /* Межбуквенный интервал подписи исполнителя. */
    --av-caption-letter-spacing: .20em;


    /* =====================================================
       ПОЛЗУНОК И ГРОМКОСТЬ
       ===================================================== */

    /* Цвет бегунка шкалы прогресса. */
    --av-progress-thumb-background: #ffffff;

    /* Граница бегунка шкалы прогресса. */
    --av-progress-thumb-border: 2px solid var(--av-jade);

    /* Тень бегунка. */
    --av-progress-thumb-shadow: 0 1px 4px rgba(40,70,80,.20);

    /* Цвет символа кнопки громкости. */
    --av-volume-button-color: var(--av-jade-dark);
}


/* =========================================================
   THEME 3 — СОВЕТСКОЕ РЕТРО
   ========================================================= */

.audio-vinyl.audio-theme-3 {

    /* =====================================================
       ОСНОВНЫЕ ЦВЕТА
       ===================================================== */

    /* Основной цвет бумажной основы. */
    --av-paper: #e5dcc7;

    /* Дополнительный тёмный оттенок бумаги. */
    --av-paper-2: #c8b99b;

    /* Основной коричнево-золотистый цвет элементов. */
    --av-gold: #92703d;

    /* Светлый оттенок золота. */
    --av-gold-light: #bda878;

    /* Тёмный коричневый оттенок для акцентов. */
    --av-gold-dark: #54391f;

    /* Основной приглушённый зелёный цвет. */
    --av-jade: #68745b;

    /* Тёмный оттенок зелёного. */
    --av-jade-dark: #46513d;

    /* Акцентный красный цвет. */
    --av-red: #863f36;

    /* Основной цвет текста. */
    --av-text: #33291f;

    /* Приглушённый цвет второстепенного текста. */
    --av-muted: #756653;


    /* =====================================================
       ПРОГРЕСС
       ===================================================== */

    /* Цвет незаполненной части шкалы. */
    --av-progress-track: #b8aa8f;

    /* Цвет заполненной части шкалы. */
    --av-progress-fill: #657157;


    /* =====================================================
       РАЗМЕРЫ
       ===================================================== */

    /* Максимальная ширина проигрывателя. */
    --av-width: 760px;

    /* Общая высота проигрывателя. */
    --av-height: 255px;

    /* Ширина левой панели. */
    --av-controls-width: 68px;

    /* Ширина центральной части. */
    --av-deck-width: 285px;

    /* Диаметр пластинки. */
    --av-disc-size: 188px;


    /* =====================================================
       ШРИФТЫ
       ===================================================== */

    /* Шрифт интерфейсных элементов. */
    --av-font-ui: "Segoe UI", Arial, sans-serif;

    /* Классический шрифт для текста этой темы. */
    --av-font-cn: Georgia, "Times New Roman", serif;


    /* =====================================================
       РАЗМЕРЫ ТЕКСТА И ЭЛЕМЕНТОВ
       ===================================================== */

    /* Размер названия композиции. */
    --av-title-size: 18px;

    /* Размер декоративного символа перед названием. */
    --av-mark-size: 19px;

    /* Размер основного текста подписи.
       0px = собственный текст подписи скрыт. */
    --av-caption-size: 0px;

    /* Размер текста исполнителя,
       выводимого через ::after. */
    --av-caption-after-size: 10px;

    /* Размер времени воспроизведения. */
    --av-time-size: 9px;

    /* Размер символов кнопок управления. */
    --av-button-size: 17px;

    /* Размер символа кнопки громкости. */
    --av-volume-icon-size: 24px;

    /* Ширина кнопок управления. */
    --av-button-width: 40px;

    /* Высота кнопок управления. */
    --av-button-height: 40px;

    /* Ширина ползунка громкости. */
    --av-volume-width: 80px;


    /* =====================================================
       ДЕКОРАТИВНЫЕ ИЗОБРАЖЕНИЯ
       ===================================================== */

    /* Фоновое изображение правой информационной части. */
    --av-info-background-image: url(https://upforme.ru/uploads/001c/08/23/2/221356.png);

    /* Положение фонового изображения. */
    --av-info-background-position: right center;

    /* Размер фонового изображения. */
    --av-info-background-size: cover;


    /* =====================================================
       СИМВОЛЫ
       ===================================================== */

    /* Символ кнопки «Плей». */
    --av-play-icon: '\25b6';

    /* Символ кнопки «Пауза». */
    --av-pause-icon: '\23f8';

    /* Символ кнопки «Стоп». */
    --av-stop-icon: '\25a0';

    /* Символ кнопки смены изображения пластинки. */
    --av-cover-icon: '\21c4';

    /* Декоративный символ перед названием композиции. */
    --av-title-icon: '\266b';

    /* Текст подписи под названием композиции. */
    --av-caption-text: 'Музыка';


    /* =====================================================
       ОБЩАЯ ГЕОМЕТРИЯ
       ===================================================== */

    /* Используется CSS Grid. */
    --av-display: grid;

    /* Три колонки: управление, пластинка и информация. */
    --av-grid-columns:
        var(--av-controls-width)
        var(--av-deck-width)
        minmax(0, 1fr);

    /* Фиксированная высота карточки. */
    --av-card-height: var(--av-height);

    /* Минимальная высота карточки. */
    --av-card-min-height: var(--av-height);

    /* Фон всей карточки. */
    --av-card-background:
        linear-gradient(
            135deg,
            #e9e0cc 0%,
            #d8cbb1 48%,
            #b9a27a 100%
        );

    /* Граница всей карточки. */
    --av-card-border: 1px solid #765631;

    /* Скругление углов карточки. */
    --av-card-radius: 5px;

    /* Тень карточки и внутренняя подсветка. */
    --av-card-shadow:
        0 5px 14px rgba(35,23,12,.30),
        inset 0 1px 0 rgba(255,255,255,.55),
        inset 0 -1px 0 rgba(40,25,10,.25);


    /* =====================================================
       ЛЕВАЯ ПАНЕЛЬ
       ===================================================== */

    /* Flex-размер не используется при CSS Grid. */
    --av-controls-flex: none;

    /* Левая панель занимает первую колонку Grid. */
    --av-controls-grid-column: 1;

    /* Фон панели управления с переходом от светлого
       к более тёмному древесному оттенку. */
    --av-controls-background:
        linear-gradient(
            180deg,
            #cfc1a2 0%,
            #b5a27f 48%,
            #9b8662 100%
        );

    /* Правая граница панели управления. */
    --av-controls-border-right: 1px solid #725432;

    /* Расстояние между кнопками. */
    --av-controls-gap: 9px;


    /* =====================================================
       КНОПКИ
       ===================================================== */

    /* Толстая декоративная граница кнопок. */
    --av-button-border: 2px solid #76542d;

    /* Многослойный ретро-фон кнопок. */
    --av-button-background:
        linear-gradient(
            145deg,
            #e9ddc1 0%,
            #c8b58e 48%,
            #9f875e 100%
        );

    /* Цвет символов кнопок. */
    --av-button-color: #593b23;

    /* Объёмная тень и внутренняя подсветка кнопок. */
    --av-button-shadow:
        0 3px 5px rgba(35,22,10,.34),
        inset 0 1px 0 rgba(255,255,255,.65),
        inset 0 -2px 3px rgba(55,35,15,.20);

    /* Размер собственного текста кнопки.
       0 = используется символ из переменной icon. */
    --av-button-font-size: 0;

    /* Высота строки символа внутри кнопки. */
    --av-button-line-height: 1;

    /* Внутренний отступ кнопки. */
    --av-button-padding: 0;

    /* Более светлый фон кнопки при наведении. */
    --av-button-hover-background:
        linear-gradient(
            145deg,
            #f0e5cc 0%,
            #d2bf99 48%,
            #aa9065 100%
        );

    /* Цвет границы при наведении. */
    --av-button-hover-border: #634521;


    /* =====================================================
       ЦЕНТРАЛЬНАЯ ЧАСТЬ
       ===================================================== */

    /* Flex-размер не используется при CSS Grid. */
    --av-deck-flex: none;

    /* Центральная часть занимает вторую колонку Grid. */
    --av-deck-grid-column: 2;

    /* Центральная часть растягивается на всю высоту карточки. */
    --av-deck-height: 100%;

    /* Фон площадки с пластинкой. */
    --av-deck-background:
        linear-gradient(
            180deg,
            #cfc1a2 0%,
            #b5a27f 48%,
            #9b8662 100%
        );

    /* Правая граница центральной части. */
    --av-deck-border-right: 2px solid #2c1d13;


    /* =====================================================
       ВНУТРЕННЯЯ РАМКА
       ===================================================== */

    /* Отступ рамки слева. */
    --av-frame-left: 12px;

    /* Отступ рамки справа. */
    --av-frame-right: 12px;

    /* Отступ рамки сверху. */
    --av-frame-top: 13px;

    /* Отступ рамки снизу. */
    --av-frame-bottom: 13px;

    /* Граница внутренней рамки. */
    --av-frame-border: 2px solid #99784a;

    /* Небольшое скругление внутренней рамки. */
    --av-frame-radius: 3px;

    /* Фон внутренней рамки. */
    --av-frame-background:
        linear-gradient(
            145deg,
            #cfc09f 0%,
            #a58b61 98%,
            #806341 100%
        );

    /* Внутренняя подсветка, нижняя тень
       и внешняя тень рамки. */
    --av-frame-shadow:
        inset 0 1px 0 rgba(255,255,255,.45),
        inset 0 -10px 18px rgba(35,20,8,.30),
        0 1px 2px rgba(25,15,7,.35);


    /* =====================================================
       ПЛАСТИНКА
       ===================================================== */

    /* Толстая граница пластинки. */
    --av-disc-border: 4px solid #80623d;

    /* Тень пластинки. */
    --av-disc-shadow: 0 3px 7px rgba(80,55,20,.18);

    /* Основной цвет пластинки под изображением. */
    --av-disc-background-color: #171513;

    /* Изображение поверхности пластинки. */
    --av-record-image: url(https://upforme.ru/uploads/001c/08/23/2/178177.png);


    /* =====================================================
       ТОНАРМ
       ===================================================== */

    /* Фон основания тонарма с концентрическими оттенками. */
    --av-pivot-background:
        radial-gradient(
            circle,
            #d8c394 0 28%,
            #927344 29% 53%,
            #4a301c 54% 100%
        );

    /* Граница основания тонарма. */
    --av-pivot-border: 2px solid #4c321d;

    /* Тень основания тонарма. */
    --av-pivot-shadow: 0 2px 5px rgba(20,10,5,.45);

    /* Фон металлического рычага тонарма. */
    --av-arm-background:
        linear-gradient(
            90deg,
            #49301c 0%,
            #9d7a49 28%,
            #d1b47d 50%,
            #8a673b 72%,
            #3e2919 100%
        );

    /* Фон головки / картриджа тонарма. */
    --av-cartridge-background:
        linear-gradient(
            90deg,
            #342217 0%,
            #6d4d2b 35%,
            #8c6b3d 50%,
            #593b23 70%,
            #2c1c13 100%
        );

    /* Цвет иглы. */
    --av-stylus-background: #863f36;


    /* =====================================================
       ПРАВАЯ ЧАСТЬ
       ===================================================== */

    /* Flex-размер не используется при CSS Grid. */
    --av-info-flex: none;

    /* Правая информационная часть занимает третью колонку Grid. */
    --av-info-grid-column: 3;

    /* Внутренние отступы информационной части. */
    --av-info-padding: 28px 30px;

    /* Основной цвет фона информационной части. */
    --av-info-background-color: #e2d8c2;

    /* Показывать декоративный слой. */
    --av-info-overlay-display: block;

    /* Ширина декоративного слоя. */
    --av-info-overlay-width: 67%;

    /* Многослойный градиент декоративного слоя
       поверх фонового изображения. */
    --av-info-overlay-background:
        linear-gradient(
            90deg,
            rgba(226,216,194,.99),
            rgba(226,216,194,.94),
            rgba(226,216,194,.70),
            rgba(226,216,194,0)
        );


    /* =====================================================
       ЗАГОЛОВОК И ТЕКСТ
       ===================================================== */

    /* Классический шрифт названия композиции. */
    --av-title-font-family: Georgia, "Times New Roman", serif;

    /* Насыщенность шрифта названия. */
    --av-title-weight: 600;

    /* Межбуквенный интервал названия. */
    --av-title-letter-spacing: .01em;

    /* Шрифт декоративного символа перед названием. */
    --av-mark-font-family: serif;

    /* Цвет декоративного символа. */
    --av-mark-color: var(--av-red);

    /* Межбуквенный интервал подписи исполнителя. */
    --av-caption-letter-spacing: .12em;


    /* =====================================================
       ПОЛЗУНОК И ГРОМКОСТЬ
       ===================================================== */

    /* Цвет бегунка шкалы прогресса. */
    --av-progress-thumb-background: #ded2b8;

    /* Граница бегунка шкалы прогресса. */
    --av-progress-thumb-border:
        2px solid var(--av-jade);

    /* Тень бегунка. */
    --av-progress-thumb-shadow:
        0 1px 4px rgba(35,25,12,.35);

    /* Цвет символа кнопки громкости. */
    --av-volume-button-color: var(--av-jade-dark);
}