:root {
    color-scheme: light;
    --бумага: #e9ebe5;
    --чернила: #1b292e;
    --серый: #667277;
    --синий: #66c6df;
    --оранжевый: #e89650;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
    margin: 0;
    color: var(--чернила);
    background: linear-gradient(135deg, #f3f4ef, #d9ded6);
    font-family: Arial, Helvetica, sans-serif;
    min-height: 100svh;
}
button, input, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid #e6a362; outline-offset: 5px; }

.шапка {
    height: 87px;
    padding: 0 max(28px, calc((100vw - 1120px) / 2));
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #b9c1b9;
    background: #f2f3ecb3;
}
.логотип { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.логотип > span { font-size: 22px; font-weight: 800; font-style: italic; letter-spacing: -1px; }
.логотип small { display: block; font: 9px Arial, sans-serif; letter-spacing: 6px; margin-top: 3px; }
.номер-камеры, .метка, .штамп, .верхняя-строка, .подвал, .состояние-модуля, .настройки, output {
    font-family: "Courier New", monospace;
}
.номер-камеры { display: flex; align-items: center; gap: 24px; font-size: 10px; letter-spacing: 1px; }
.номер-камеры b { font: 700 39px Arial, sans-serif; border-left: 1px solid #a7b2ae; padding-left: 23px; }
main { max-width: 1120px; margin: auto; padding: 38px 0 24px; }
.заголовок { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 30px; }
.метка { margin: 0 0 13px; font-size: 10px; letter-spacing: 1.4px; color: #52676c; }
.метка i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; background: #478c97; border-radius: 50%; }
h1 { margin: 0; font-size: clamp(28px, 3.9vw, 50px); letter-spacing: -2px; line-height: 1.03; font-weight: 750; }
.подзаголовок { margin: 15px 0 0; color: #5b6b6f; font-size: 14px; }
.штамп { color: #86938e; font-size: 9px; line-height: 1.7; text-align: right; letter-spacing: 1px; }

.запись {
    display: grid;
    grid-template-columns: minmax(250px, 360px) minmax(0, 1fr);
    background: #111a1f;
    border: 1px solid #425252;
    box-shadow: 8px 8px 0 #c1c9c0;
    color: #dce2df;
}
.экран-видео { min-width: 0; background: #080c0e; border-right: 1px solid #435253; }
.верхняя-строка { height: 35px; padding: 0 17px; display: flex; align-items: center; justify-content: space-between; font-size: 9px; letter-spacing: .8px; color: #a3b5b7; border-bottom: 1px solid #334247; }
.верхняя-строка > span { display: flex; align-items: center; gap: 7px; }
.индикатор { width: 5px; height: 5px; background: #aa7256; border-radius: 50%; }
.идёт .индикатор { background: #ed9c62; box-shadow: 0 0 7px #de8747; }
.кадр { position: relative; aspect-ratio: 9 / 16; background: #080c0e; overflow: hidden; }
video { width: 100%; height: 100%; display: block; object-fit: contain; cursor: pointer; }
.большой-пуск { position: absolute; inset: 0; margin: auto; width: 66px; height: 66px; display: grid; place-items: center; border: 1px solid #c5e3e2; color: white; background: #101e26c9; border-radius: 50%; transition: background .2s, transform .2s; box-shadow: 0 4px 30px #0008; }
.большой-пуск:hover { background: #203e50; transform: scale(1.05); }
.большой-пуск svg { width: 23px; height: 23px; fill: currentColor; margin-left: 3px; }
.субтитры { position: absolute; bottom: 6%; inset-inline: 10px; text-align: center; pointer-events: none; filter: drop-shadow(0 2px 3px #0008); }
.субтитры b { display: table; margin: 0 auto 3px; background: #0a141bdc; padding: 4px 8px 3px; font-size: 10px; color: #b3e9f7; font-weight: 700; letter-spacing: 1px; }
.субтитры span { display: table; margin: auto; padding: 6px 10px; background: #0a1119e6; color: #fff; font-size: clamp(13px, 1.23vw, 17px); line-height: 1.35; white-space: pre-line; }

.модуль { min-width: 0; position: relative; display: flex; flex-direction: column; overflow: hidden; background: radial-gradient(ellipse at 42% 37%, #293b45 0, #182a33 40%, #101b21 90%); }
.модуль .верхняя-строка { position: relative; z-index: 1; flex-shrink: 0; }
.сцена { position: relative; flex: 1; min-height: 0; }
.номер-модуля { position: absolute; top: 18%; right: 5%; font-size: clamp(180px, 28vw, 355px); line-height: 1; font-weight: 700; letter-spacing: -30px; color: #6b8a9707; user-select: none; }
.сетка { position: absolute; inset: 23px 24px; border: 1px solid #709ba211; background: linear-gradient(#7195a007 1px, transparent 1px), linear-gradient(90deg, #7195a007 1px, transparent 1px); background-size: 46px 46px; }
.сетка::before, .сетка::after { content: ''; position: absolute; width: 12px; height: 12px; border-color: #7ea0aa66; }
.сетка::before { top: -1px; left: -1px; border-top: 1px solid; border-left: 1px solid; }
.сетка::after { bottom: -1px; right: -1px; border-right: 1px solid; border-bottom: 1px solid; }
canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; }
.ошибка-графики { position: absolute; inset: 45% 20px auto; text-align: center; color: #b8cdd5; font-size: 14px; line-height: 1.6; }
.состояние-модуля { margin: 0 24px 20px; padding-top: 16px; border-top: 1px solid #6684904d; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; font-size: 10px; letter-spacing: 1px; }
.состояние-модуля > span:first-child { display: flex; align-items: center; gap: 9px; font-size: 12px; }
.состояние-модуля > span > i { width: 5px; height: 5px; border-radius: 50%; background: var(--синий); box-shadow: 0 0 8px #66c6df55; }
#статус { color: #789ea9; font-size: 9px; }
.сигнал { display: flex; width: 100%; gap: 5px; align-items: center; height: 25px; margin-top: 10px; --сила: 0; }
.сигнал i { width: 4px; height: calc(2px + 19px * var(--сила)); background: #70b8ca; opacity: .6; transform: scaleY(.7); }
.сигнал i:nth-child(3n) { transform: scaleY(.4); }
.сигнал i:nth-child(4n) { transform: scaleY(1); }
.сигнал i:nth-child(5n) { transform: scaleY(.55); }

.управление { grid-column: 1 / -1; background: #18252a; border-top: 1px solid #3b4e53; }
.дорожка { display: flex; gap: 17px; align-items: center; padding: 14px 20px 9px; }
.значок { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; background: transparent; color: #d2deda; border: 0; padding: 4px; }
.значок:hover { color: var(--синий); }
.значок svg { width: 22px; height: 22px; fill: currentColor; }
output { font-size: 11px; min-width: 83px; font-variant-numeric: tabular-nums; white-space: nowrap; }
input[type=range] { accent-color: var(--синий); cursor: pointer; min-width: 0; height: 20px; margin: 0; }
#позиция { flex: 1; }
.настройки { border-top: 1px solid #334248; display: flex; gap: 22px; align-items: center; min-height: 51px; padding: 10px 22px; }
.переключатель { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; background: transparent; border: 0; color: #819397; font-size: 10px; letter-spacing: .5px; padding: 3px 0; }
.переключатель[aria-pressed=true] { color: #9addf0; }
.переключатель:hover { color: #e0eff4; }
.переключатель i { width: 5px; height: 5px; background: #617176; border-radius: 50%; }
.переключатель[aria-pressed=true] i { background: #83d6ed; box-shadow: 0 0 8px #66c6df4d; }
.cc { display: inline-block; padding: 0 2px; border: 1px solid currentColor; font-size: 9px; line-height: 12px; }
.разделитель { height: 13px; width: 1px; background: #405158; }
#громкость { width: 68px; }
.скорость { margin-left: auto; color: #82969c; font-size: 9px; white-space: nowrap; }
select { padding: 4px 3px; margin-left: 5px; background: #18252a; color: #d6e1df; border: 0; cursor: pointer; color-scheme: dark; }
#ошибка-видео { margin: 0; padding: 8px 22px 17px; color: #efb389; font-size: 13px; }
.подвал { display: flex; justify-content: space-between; margin-top: 23px; color: #6a7b7b; font-size: 9px; letter-spacing: .6px; }
.автор { color: #8c9a98; }

.запись:fullscreen { width: 100%; height: 100%; border: 0; box-shadow: none; padding: 0 max(0px, calc((100vw - 1300px) / 2)); grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); grid-template-rows: minmax(0, 1fr) auto; }
.запись:fullscreen .экран-видео { display: flex; flex-direction: column; }
.запись:fullscreen .кадр { flex: 1; min-height: 0; aspect-ratio: auto; }
.запись:fullscreen .субтитры span { font-size: clamp(16px, 1.5vw, 24px); }

@media (min-width: 1100px) and (max-height: 900px) {
    main { max-width: 1020px; padding-top: 24px; }
    .шапка { height: 73px; }
    .заголовок { margin-bottom: 22px; }
    .запись { grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); }
    h1 { font-size: 43px; }
}
@media (max-width: 1175px) {
    main { margin-inline: 28px; }
}
@media (max-width: 740px) {
    main { margin-inline: 16px; padding-top: 26px; }
    .шапка { height: 70px; padding-inline: 16px; }
    .логотип > span { font-size: 19px; }
    .логотип img { width: 32px; height: 32px; }
    .номер-камеры { font-size: 0; gap: 0; }
    .номер-камеры b { font-size: 31px; }
    h1 { font-size: clamp(25px, 6vw, 39px); letter-spacing: -1.2px; }
    .метка { font-size: 9px; }
    .подзаголовок { max-width: 370px; font-size: 13px; line-height: 1.5; }
    .штамп { display: none; }
    .запись { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); box-shadow: 4px 4px 0 #bcc8be; }
    .верхняя-строка { font-size: 8px; padding-inline: 10px; }
    .верхняя-строка > span:last-child { display: none; }
    .состояние-модуля { margin: 0 12px 12px; gap: 10px; padding-top: 10px; }
    .состояние-модуля > span:first-child { font-size: 10px; }
    #статус { font-size: 8px; }
    .сигнал { gap: 3px; overflow: hidden; }
    .сигнал i { width: 3px; flex-shrink: 0; }
    .сетка { inset: 15px 10px; }
    .номер-модуля { font-size: 160px; letter-spacing: -15px; }
    .дорожка { gap: 10px; padding: 10px; }
    output { min-width: 71px; font-size: 10px; }
    .настройки { flex-wrap: wrap; gap: 16px; padding: 10px 14px; }
    #громкость, .разделитель { display: none; }
    .скорость { font-size: 0; }
    .скорость select { font-size: 12px; }
    .переключатель { font-size: 9px; gap: 5px; }
    .субтитры { inset-inline: 3px; bottom: 4%; }
    .субтитры span { font-size: 12px; padding: 4px 5px; }
    .субтитры b { font-size: 8px; }
    .подвал { gap: 15px; font-size: 8px; line-height: 1.6; }
    .подвал > span:last-child { text-align: right; max-width: 150px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; }
}