:root{
  --лист:#07090d; --карта:#0e1116; --карта-верх:#141820;
  --грань:rgba(150,186,220,.16); --грань-ярче:rgba(150,186,220,.32);
  --текст:#eef0f5; --серый:#8e949f; --тише:#5f6572;
  --голубой:#78c6ff; --оранж:#e2380a; --оранж-тень:rgba(226,56,10,.6);
  --ход-в:cubic-bezier(.33,.8,.5,1); --зелёный:#7fe6a0; --жёлтый:#ffd666; --сирень:#c9a6ff;
  --меню:268px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--лист);color:var(--текст);font:500 15px/1.55 Manrope,system-ui,sans-serif;
  background-image:linear-gradient(rgba(120,198,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(120,198,255,.045) 1px,transparent 1px);
  background-size:96px 96px;min-height:100vh}
h1,h2,h3{font-family:Unbounded,sans-serif;margin:0}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit}
.скип{position:absolute;left:-9999px}
.скип:focus{left:12px;top:12px;z-index:99;background:var(--голубой);color:#05202f;padding:10px 14px;border-radius:9px}

/* меню */
.меню{position:fixed;left:0;top:0;bottom:0;width:var(--меню);padding:22px 18px;border-right:1px solid var(--грань);
  background:rgba(9,11,16,.92);backdrop-filter:blur(10px);display:flex;flex-direction:column;gap:22px;z-index:20}
.знак{display:flex;flex-direction:column;gap:2px}
.знак b{font:800 19px/1.1 Unbounded,sans-serif;letter-spacing:-.02em}
.знак span{font:800 11px/1 Manrope,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--голубой)}
.меню nav{display:flex;flex-direction:column;gap:6px}
.меню nav a{display:flex;align-items:center;gap:11px;padding:12px 13px;border-radius:12px;border:1px solid transparent;
  color:var(--серый);font:800 13.5px/1 Manrope,sans-serif}
.меню nav a i{font-style:normal;font-size:15px;width:18px;text-align:center}
.меню nav a:hover{border-color:var(--грань);color:var(--текст)}
.меню nav a[aria-current="page"]{background:var(--карта-верх);border-color:var(--грань-ярче);color:var(--текст)}
.бейдж{margin-left:auto;font:800 11px/1 JetBrains Mono,monospace;color:var(--тише);background:rgba(150,186,220,.12);
  padding:4px 7px;border-radius:7px}
.меню-низ{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.сноска{font-size:11.5px;line-height:1.5;color:var(--тише);margin:0}
.меню-кнопка{display:none;position:fixed;left:12px;top:12px;z-index:30;width:42px;height:42px;border-radius:12px;
  border:1px solid var(--грань);background:var(--карта);color:var(--текст);font-size:17px;cursor:pointer}

main{margin-left:var(--меню);padding:34px 28px 90px;max-width:1500px}

/* общее */
.шапка-страницы{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:8px}
h1{font:800 clamp(24px,3.4vw,34px)/1.05 Unbounded,sans-serif;letter-spacing:-.02em}
.подзаг{color:var(--серый);max-width:74ch;margin:6px 0 24px;font-size:13.5px;line-height:1.6}
.кн,.мелкая{appearance:none;cursor:pointer;border:1px solid var(--грань);background:transparent;color:var(--текст);
  border-radius:10px;font:800 12px/1 Manrope,sans-serif;letter-spacing:.05em;text-transform:uppercase;padding:11px 14px}
.мелкая{font-size:11px;padding:9px 11px;color:var(--серый)}
.кн:hover,.мелкая:hover{border-color:var(--грань-ярче);color:var(--текст)}
.кн.главная,.мелкая.главная{background:var(--голубой);border-color:var(--голубой);color:#05202f}
.кн.опасная:hover,.мелкая.опасная:hover{border-color:var(--оранж);color:#ff9a78}
.кн:focus-visible,.мелкая:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.карточка:focus-visible{
  outline:2px solid var(--голубой);outline-offset:2px}
input,select,textarea{background:#0b0d12;border:1px solid var(--грань);color:var(--текст);border-radius:10px;
  padding:11px 12px;font:500 13.5px/1.4 Manrope,sans-serif;width:100%}
textarea{font:500 12px/1.6 JetBrains Mono,monospace;min-height:170px;resize:vertical}
.пусто{border:1px dashed var(--грань-ярче);border-radius:16px;padding:34px;text-align:center;color:var(--серый)}

/* пресеты */
.пресеты{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px}
.пресет{background:linear-gradient(180deg,var(--карта-верх),var(--карта));border:1px solid var(--грань);
  border-radius:16px;padding:17px;display:flex;flex-direction:column;gap:11px}
.пресет h3{font:800 16px/1.2 Unbounded,sans-serif}
.пресет .мета{font:500 11px/1 JetBrains Mono,monospace;color:var(--тише);display:flex;gap:10px;flex-wrap:wrap}
.полоска{height:5px;border-radius:999px;background:#2b2d34;overflow:hidden}
.полоска i{display:block;height:100%;background:var(--голубой)}
.пресет .блоки{display:flex;flex-wrap:wrap;gap:4px}
.чип{font:800 9.5px/1 Manrope,sans-serif;letter-spacing:.05em;text-transform:uppercase;padding:5px 7px;border-radius:6px;
  border:1px solid var(--грань);color:var(--тише)}
.чип.есть{border-color:rgba(120,198,255,.45);color:var(--голубой)}
.пресет .кнопки{display:flex;gap:7px;flex-wrap:wrap;margin-top:auto}

/* мастер */
.мастер-верх{position:sticky;top:0;z-index:9;background:linear-gradient(180deg,var(--лист) 76%,rgba(7,9,13,0));padding:10px 0 14px}
.шаги{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:12px}
.шаг-точка{width:26px;height:6px;border-radius:999px;background:#242730;cursor:pointer;border:0;padding:0}
.шаг-точка.готов{background:var(--голубой)}
.шаг-точка.текущий{background:#fff}
.мастер-полоса{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:13px 15px;border:1px solid var(--грань);
  border-radius:14px;background:var(--карта)}
.мастер-полоса .имя{flex:1;min-width:180px}
.лимит{font:800 12px/1 JetBrains Mono,monospace;padding:7px 10px;border-radius:9px;border:1px solid var(--грань);color:var(--серый)}
.лимит.полон{border-color:var(--зелёный);color:var(--зелёный)}
.лимит.перебор{border-color:var(--оранж);color:#ff9a78}
.почему{margin:12px 0 0;padding:11px 13px;border-left:2px solid var(--грань-ярче);color:var(--серый);font-size:12.5px;line-height:1.55}

/* карточки приёмов */
.ряд{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:13px}
.карточка{background:linear-gradient(180deg,var(--карта-верх),var(--карта));border:1px solid var(--грань);
  border-radius:16px;overflow:hidden;display:flex;flex-direction:column;text-align:left;padding:0;color:inherit;cursor:pointer}
.карточка.выбрана{border-color:var(--голубой);box-shadow:0 0 0 1px rgba(120,198,255,.3),0 16px 38px -26px rgba(120,198,255,.85)}
.карточка.занята{opacity:.45}
.сцена{position:relative;height:142px;display:grid;place-items:center;overflow:hidden;background:#101720;
  background-image:linear-gradient(rgba(140,200,255,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(140,200,255,.10) 1px,transparent 1px);
  background-size:32px 32px;filter:brightness(var(--яркость,1.35))}
.сцена iframe{filter:none}
.сцена iframe{width:100%;height:100%;border:0;background:transparent}
.низ-карточки{padding:11px 13px 13px;display:flex;flex-direction:column;gap:5px;flex:1}
.имя-приёма{font:800 13px/1.3 Manrope,sans-serif}
.описание{color:var(--серый);font-size:12px;margin:0;line-height:1.45}
.заметка{font-size:11.5px;color:#cfd3da;border-left:2px solid var(--грань-ярче);padding-left:8px;margin:2px 0 0}
.метки{display:flex;gap:5px;flex-wrap:wrap;margin-top:auto;padding-top:7px}
.метка{font:800 9.5px/1 Manrope,sans-serif;letter-spacing:.07em;text-transform:uppercase;padding:5px 7px;border-radius:6px;
  border:1px solid var(--грань);color:var(--тише)}
.метка.движок{border-color:rgba(120,198,255,.38);color:var(--голубой)}
.метка.витрина{border-color:rgba(255,214,102,.4);color:var(--жёлтый)}
.метка.стенд{border-color:rgba(226,56,10,.42);color:#ff9a78}
.метка.веб{border-color:rgba(120,198,255,.42);color:var(--голубой)}
.метка.моё{border-color:rgba(201,166,255,.5);color:var(--сирень)}
.метка.своё{border-color:rgba(127,230,160,.5);color:var(--зелёный)}
.метка.файл{border-color:rgba(255,214,102,.4);color:var(--жёлтый)}
.метка.беру{border-color:rgba(127,230,160,.45);color:var(--зелёный)}
.метка.мимо{border-color:rgba(226,56,10,.5);color:#ff9a78}
.метка.код{font-family:JetBrains Mono,monospace;letter-spacing:0;text-transform:none;color:var(--серый)}
.строка-звука{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin:2px 0 0}
.звук-кн{appearance:none;cursor:pointer;background:transparent;border:1px solid var(--грань);border-radius:6px;
  padding:4px 6px;font:500 9.5px/1 JetBrains Mono,monospace;color:var(--серый)}
.звук-кн:hover{border-color:var(--голубой);color:var(--голубой)}
.звук-кн.играет{background:var(--голубой);border-color:var(--голубой);color:#05202f}
.карточка-кнопки{display:flex;gap:6px;margin-top:8px}
.карточка-кнопки button{flex:1;appearance:none;cursor:pointer;border:1px solid var(--грань);background:transparent;
  color:var(--тише);font:700 10px/1 Manrope,sans-serif;padding:7px;border-radius:8px}
.карточка-кнопки button:hover{border-color:var(--грань-ярче);color:var(--текст)}
.добавить{border:1px dashed var(--грань-ярче);border-radius:16px;background:transparent;color:var(--серый);cursor:pointer;
  min-height:230px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  font:800 12px/1.4 Manrope,sans-serif;padding:14px;text-align:center}
.добавить:hover{border-color:var(--голубой);color:var(--голубой)}
.добавить b{font:800 26px/1 Manrope,sans-serif}
.добавить span{font:500 11px/1.4 Manrope,sans-serif;color:var(--тише);max-width:180px}
.звук-демо{display:flex;align-items:center;gap:9px;background:#12151b;border:1px solid var(--грань);border-radius:12px;
  padding:11px 13px;color:var(--текст);cursor:pointer}
.звук-играть{width:26px;height:26px;border-radius:999px;background:var(--голубой);color:#05202f;display:grid;place-items:center;
  font:800 10px/1 Manrope,sans-serif;flex:0 0 26px}
.звук-полосы{display:flex;align-items:center;gap:3px;height:26px}
.звук-полосы i{width:3px;height:40%;background:var(--тише);border-radius:2px;display:block}
.звук-демо.играет .звук-полосы i{background:var(--голубой);animation:столбик .7s ease-in-out infinite;animation-delay:calc(var(--и)*-.07s)}
.звук-демо.играет .звук-играть{background:var(--оранж);color:#fff}
.звук-длина{font:500 9.5px/1 JetBrains Mono,monospace;color:var(--тише)}

/* библиотека */
.панель{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.панель input[type=search]{max-width:280px}
.фильтр{appearance:none;cursor:pointer;border:1px solid var(--грань);background:transparent;color:var(--серый);
  font:800 11px/1 Manrope,sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:9px 11px;border-radius:9px}
.фильтр[aria-pressed="true"]{border-color:var(--голубой);color:var(--голубой)}
section.блок{margin-top:34px;scroll-margin-top:24px}
.заголовок-блока{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:4px}
h2{font:800 clamp(17px,2.4vw,22px)/1.1 Unbounded,sans-serif}
.номер{font:800 12px/1 JetBrains Mono,monospace;color:var(--тише);letter-spacing:.1em}
.счёт-блока{font:800 11px/1 JetBrains Mono,monospace;color:var(--тише)}
.где{color:var(--серый);margin:0 0 14px;max-width:76ch;font-size:13px}

/* итог */
.итог{background:var(--карта);border:1px solid var(--грань);border-radius:16px;padding:18px;margin-top:26px}
.итог h3{font:800 15px/1.2 Unbounded,sans-serif;margin-bottom:10px}
pre.тз{font:500 12.5px/1.65 JetBrains Mono,monospace;color:var(--серый);white-space:pre-wrap;margin:0;max-height:340px;overflow:auto}
.кнопки-итога{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}

/* окно кода */
dialog.окно{border:1px solid var(--грань);border-radius:18px;background:var(--карта);color:var(--текст);padding:0;
  width:min(780px,94vw);max-height:92vh}
dialog.окно::backdrop{background:rgba(3,5,8,.74)}
.окно form{padding:20px;display:flex;flex-direction:column;gap:12px}
.окно h3{font:800 17px/1.2 Unbounded,sans-serif}
.пояснение{margin:0;color:var(--серый);font-size:12.5px;line-height:1.55}
.окно label{display:flex;flex-direction:column;gap:6px;font:800 11px/1 Manrope,sans-serif;letter-spacing:.06em;
  text-transform:uppercase;color:var(--тише)}
.пара{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.превью{height:180px;border:1px solid var(--грань);border-radius:12px;background:#000000;overflow:hidden;
  background-image:linear-gradient(rgba(120,198,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(120,198,255,.05) 1px,transparent 1px);
  background-size:32px 32px}
.превью iframe{width:100%;height:100%;border:0}
.низ-окна{display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap}

.тост{position:fixed;left:50%;bottom:26px;translate:-50% 0;background:var(--карта-верх);border:1px solid var(--грань-ярче);
  color:var(--текст);padding:12px 16px;border-radius:12px;font:700 13px/1 Manrope,sans-serif;opacity:0;pointer-events:none;
  transition:opacity .2s,translate .2s;z-index:50}
.тост.видно{opacity:1;translate:-50% -6px}

@keyframes столбик{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}

@media (max-width:900px){
  .меню{transform:translateX(-100%);transition:transform .2s;width:min(300px,86vw)}
  .меню.открыто{transform:none}
  .меню-кнопка{display:block}
  main{margin-left:0;padding:70px 16px 80px}
  .пара{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── задачи ─────────────────────────────────────────────── */
section.задача{margin:22px 0 30px;padding:16px 16px 6px;border:1px solid var(--грань);border-radius:16px;background:rgba(14,17,22,.6)}
.шапка-задачи{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.шапка-задачи h3{font:800 15px/1.25 Unbounded,sans-serif;margin:0}
.шапка-задачи .лимит{font:800 11px/1 JetBrains Mono,monospace;padding:6px 9px;border-radius:8px;border:1px solid var(--грань);color:var(--серый)}
.шапка-задачи .лимит.полон{border-color:var(--зелёный);color:var(--зелёный)}
.шапка-задачи .лимит.пусто{border-color:rgba(226,56,10,.35);color:#ff9a78}
.шапка-задачи .счёт-блока{margin-left:auto}
section.задача .где{margin:0 0 6px;font-size:12.5px}
section.задача .почему{margin:0 0 12px;padding:8px 11px;border-left:2px solid var(--грань-ярче);color:var(--серый);font-size:12px;line-height:1.5}
section.задача .ряд{margin-bottom:14px}
.шаг-точка.начат{background:#3f6f95}

/* кнопка «Взять» и заметка на карточке */
.карточка{cursor:default}
.взять{appearance:none;cursor:pointer;border:1px solid var(--грань);background:transparent;color:var(--серый);
  font:800 11px/1 Manrope,sans-serif;letter-spacing:.07em;text-transform:uppercase;padding:9px 10px;border-radius:9px;margin-top:8px;width:100%}
.взять:hover{border-color:var(--грань-ярче);color:var(--текст)}
.взять.взята{background:var(--голубой);border-color:var(--голубой);color:#05202f}
.заметка-приёма{margin-top:6px}
.заметка-приёма textarea{min-height:0;height:44px;padding:8px 9px;border-radius:9px;border-style:dashed;
  font:500 11.5px/1.45 Manrope,sans-serif;background:#0a0c11;color:var(--текст);resize:none;overflow:hidden}
.заметка-приёма textarea::placeholder{color:var(--тише)}
.заметка-приёма.есть textarea{border-style:solid;border-color:rgba(127,230,160,.45);background:rgba(127,230,160,.06)}
.заметка-приёма textarea:focus{border-color:var(--голубой)}
.шапка-задачи .лимит.пропуск{border-color:var(--грань-ярче);color:var(--тише)}
section.задача.пропущена{opacity:.62}
section.задача.пропущена .ряд{filter:grayscale(.55)}

/* регулятор яркости превью */
.яркость{display:flex;align-items:center;gap:7px;font:800 11px/1 Manrope,sans-serif;letter-spacing:.05em;
  text-transform:uppercase;color:var(--серый);border:1px solid var(--грань);border-radius:9px;padding:7px 11px}
.яркость input{width:110px;accent-color:var(--голубой);padding:0;border:0;background:transparent}

/* внутри превью палитра светлее, чем в ролике: иначе демка не читается на маленькой карточке */
.сцена{--карта:#1b2230;--карта-верх:#242e3e;--грань:rgba(160,200,240,.34);--грань-ярче:rgba(170,210,245,.52);
  --тише:#7d8595;--серый:#aab2c0}
.метка.мех{border-color:rgba(120,198,255,.3);color:#9fd0f5;text-transform:none;letter-spacing:0;font-weight:700}
.метка.скин{border-color:rgba(226,56,10,.45);color:#ff9a78}
details.параметры{margin-top:8px;border:1px solid var(--грань);border-radius:10px;background:#0b0d12;padding:8px 10px}
details.параметры summary{cursor:pointer;font:800 10.5px/1.3 Manrope,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--серый)}
details.параметры[open] summary{margin-bottom:8px;color:var(--текст)}
.парам{display:grid;grid-template-columns:1fr 1.15fr;gap:7px;align-items:center;margin-bottom:6px}
.парам span{font:700 10.5px/1.3 Manrope,sans-serif;color:var(--тише)}
.парам input,.парам select{padding:6px 8px;font:500 11.5px/1.3 Manrope,sans-serif;border-radius:8px}
.парам input[type=color]{padding:2px;height:28px}

/* настройка вида */
.вид-панель{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.вид-панель .яркость{gap:6px}
.вид-панель input[type=color]{width:34px;height:26px;padding:2px;border-radius:7px;cursor:pointer}
.ряд{grid-template-columns:repeat(auto-fill,minmax(var(--ширина-карточки,232px),1fr))}
.сцена{background:var(--сцена-фон,#141c26);
  background-image:linear-gradient(var(--сцена-клетка,rgba(140,200,255,.10)) 1px,transparent 1px),
                   linear-gradient(90deg,var(--сцена-клетка,rgba(140,200,255,.10)) 1px,transparent 1px);
  --голубой:var(--акц,#78c6ff)}
/* Цвет самого листа и чернил задаёт демо.css по атрибуту data-лист: там он
   #fcfdff и посчитан под порог 3:1. Здесь остаются только служебные токены
   карточки, иначе два источника спорят и лист выходит то #f5f7fb, то #fcfdff. */
/* Кромку НЕ переопределяем: она приходит из демо.css, где посчитана под порог 3:1.
   Стояло .18 — это 1,37:1, и на белом листе рамки макетов пропадали совсем: приёмы
   выглядели пустыми белыми прямоугольниками. Два источника спорили, побеждал этот. */
/* Светлые токены — по листу самой сцены, а не по телу страницы: тело и сцена могли
   разойтись, и на чёрной сцене оставался тёмный текст. Фильтр тут не гасим — на белом
   листе ползунок яркости работает контрастом (правило в конце файла). */
.сцена[data-лист="светлый"]{--текст:#161a20;--серый:#4c5563;--тише:#6d7583;--карта:#e8edf5;--карта-верх:#f7f9fc;
  --грань-ярче:rgba(20,40,70,.52)}
.вид-панель{border:1px solid var(--грань);border-radius:10px;padding:6px 10px}
.вид-подпись{display:flex;flex-direction:column;gap:2px;font:800 10px/1 Manrope,sans-serif;letter-spacing:.06em;
  text-transform:uppercase;color:var(--серый);padding-right:4px;border-right:1px solid var(--грань);margin-right:4px}
.вид-подпись b{font:700 9px/1 Manrope,sans-serif;letter-spacing:.02em;text-transform:none;color:var(--тише)}

/* свет пресета и блоков */
section.задача{--акц:#78c6ff;--свеч:1}
details.палитра-задачи{position:relative}
details.палитра-задачи summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center}
details.палитра-задачи summary::-webkit-details-marker{display:none}
details.палитра-задачи[open] > summary{border-color:var(--голубой);color:var(--голубой)}
details.палитра-задачи[open]{z-index:12}
details.палитра-задачи > label,details.палитра-задачи > button,details.палитра-задачи > .сноска{display:flex}
details.палитра-задачи > label{align-items:center;gap:8px;font:800 10px/1 Manrope,sans-serif;letter-spacing:.05em;
  text-transform:uppercase;color:var(--тише);margin-top:8px}
details.палитра-задачи[open]{position:absolute;background:var(--карта-верх);border:1px solid var(--грань-ярче);
  border-radius:12px;padding:10px 12px;margin-top:4px;min-width:230px;box-shadow:0 20px 40px -20px #000}
details.палитра-задачи[open] > summary{position:absolute;top:-34px;left:0}
details.палитра-задачи input[type=color]{width:38px;height:24px;padding:2px}
details.палитра-задачи .сноска{margin-top:8px}
details.палитра-задачи button{margin-top:10px;width:100%}

.сцена{--голубой:var(--акц,#78c6ff)}


/* утончение демо: свечение вместо толщины (правило Данила 30.09.2026) */
.сцена .свет-линии{overflow:visible;
  filter:drop-shadow(0 0 5px color-mix(in srgb, var(--акц) calc(55% * var(--свеч,1)), transparent))
         drop-shadow(0 0 13px color-mix(in srgb, var(--акц) calc(26% * var(--свеч,1)), transparent))}
.сцена :is(div,span,i,b,section,article)[style*="solid"]{border-width:.6px}
.сцена .кд,.сцена .окно-д,.сцена .шапка-д,.сцена .вырез{border-width:.6px}
.сцена .окно-д{box-shadow:0 0 26px -14px var(--оранж)}
.сцена .штамп{border-width:.6px;text-shadow:0 0 10px rgba(255,106,77,.55)}


/* ===== Лист кадра и плеер приёма (01.10.2026) ===== */
.лист-выбор{display:flex;flex-direction:column;gap:7px;margin-bottom:12px}
.лист-подпись{font:600 10px/1 Manrope,system-ui,sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--тише)}
.лист-тумблер{display:inline-flex;padding:3px;gap:3px;border:1px solid var(--грань);border-radius:999px}
.лист-тумблер button{flex:1;border:0;background:transparent;color:var(--серый);cursor:pointer;
  border-radius:999px;padding:7px 10px;font:600 12.5px Manrope,system-ui,sans-serif;
  transition:background .2s var(--ход-в),color .2s var(--ход-в)}
.лист-тумблер button[aria-pressed="true"]{background:var(--текст);color:var(--лист)}
.лист-тумблер button:focus-visible{outline:2px solid var(--голубой);outline-offset:2px}

/* Плеер лежит поверх сцены и проявляется по наведению: карточек на странице много,
   шесть кнопок на каждой превратили бы сетку в панель управления. */
.сцена{position:relative}
.плеер{position:absolute;right:7px;top:7px;display:flex;gap:5px;z-index:4;
  opacity:.5;transition:opacity .18s var(--ход-в)}
/* Кнопки видны только там, где браузер подтвердил анимацию: на статичном приёме
   «проиграть» обещает то, чего не будет. */
.сцена[data-движение="нет"] .плеер{display:none}
.карточка:hover .сцена[data-движение="да"] .плеер,
.сцена[data-движение="да"]:focus-within .плеер,
.сцена.играет .плеер{opacity:1}
/* Кнопка-повтор, когда включена, видна всегда — иначе непонятно, что приём крутится */
.плеер button[aria-pressed="true"]{opacity:1}
.плеер button{width:27px;height:27px;display:grid;place-items:center;cursor:pointer;
  border:1px solid rgba(150,186,220,.3);border-radius:50%;
  background:rgba(7,9,13,.72);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  color:#eef0f5;font-size:11px;line-height:1;padding:0;
  transition:border-color .18s var(--ход-в),background .18s var(--ход-в)}
.плеер button:hover{border-color:var(--голубой);color:var(--голубой)}
.плеер button:focus-visible{outline:2px solid var(--голубой);outline-offset:2px}
.плеер button[aria-pressed="true"]{background:var(--голубой);color:#05202f;border-color:var(--голубой)}
.сцена[data-лист="светлый"] .плеер button{background:rgba(252,253,255,.8);color:#161a20;
  border-color:rgba(20,40,70,.22)}


/* Лист ролика — фон всего ролика, а ролик вертикальный. Превью листа было плашкой
   150×80 в рамке посреди сцены и читалось как горизонтальная картинка. Здесь сцена
   выше обычной, а лист заполняет кадр 9:16 целиком, от края до края, без внутренней
   рамки — так он и ляжет под весь выпуск. Разметку приёмов не трогаем: размеры в ней
   нужны другим местам (реестр, замеры), вертикаль — дело показа. */
#b19-з1 .сцена{height:250px}
#b19-з1 .сцена > :first-child{width:141px!important;height:250px!important;max-width:none!important;
  border:0!important;border-radius:14px!important;
  box-shadow:inset 0 0 0 .6px color-mix(in srgb, var(--чернила, #fff) 22%, transparent)!important}
/* Мерцающая сетка нарисована 10×6 под горизонталь; в вертикальном кадре те же 60
   клеток встают 6×10 — остаются квадратными, а не вытягиваются в столбики. */
#b19-з1 .сцена > [style*="grid-template-columns:repeat(10,1fr)"]{
  grid-template-columns:repeat(6,1fr)!important;grid-template-rows:repeat(10,1fr)!important}
/* Яркость — ползунок вида сайта, чтобы вытянуть тусклое на чёрном листе. На белом
   листе он не действует. brightness ×2,2 выжигал все светло-серые линии в белое, и
   в мастере подложка стояла пустой, с одними синими точками (04.10, скрин Данила).
   Пробовал вместо него контраст — тот темнит серое, но светло-серую кромку белого
   листа тоже уводит в белое («Белый с зерном» пропадал). Белый лист выверен под порог
   3:1 сам, тянуть его нечем и незачем. */
.сцена[data-лист="светлый"]{filter:none}
/* Контраст из ползунка яркости убран: contrast(1,24) крутился вокруг середины серого и
   вдавливал тёмно-серые карточки чёрного листа в чёрное — на максимуме яркости они
   становились ТЕМНЕЕ, чем без неё (0,05 → ×2,2 → 0,11 → контраст → 0,016). */

/* Корзина: убранные приёмы, «вернуть» и «удалить навсегда». */
a.кнопка-корзины{text-decoration:none;display:inline-flex;align-items:center}
.опасно{color:#ff8f8f!important;border-color:rgba(255,120,120,.45)!important}
.опасно:hover{background:rgba(255,90,90,.12)!important}
.убрать-в-мастере{margin-top:6px;width:100%;background:transparent;border:1px dashed var(--грань);border-radius:9px;
  color:var(--тише);font:700 11px/1 Manrope,sans-serif;padding:7px;cursor:pointer}
.убрать-в-мастере:hover{color:var(--текст);border-style:solid}
.откуда{font:700 10px/1.3 Manrope,sans-serif;letter-spacing:.04em;color:var(--тише);margin-bottom:4px}
.пусто-корзина{color:var(--тише);font:600 14px/1.5 Manrope,sans-serif;padding:24px 0}

/* Кромка на чёрном в превью: волосяная линия .6px на маленькой карточке рисуется
   примерно на 60% силы, и граница 35% (3:1 в кадре, где приём увеличен в 3–5 раз)
   на сайте выходила около 2:1 — карточки на чёрном было не разглядеть без ползунка
   яркости. Здесь граница 58%: на экране это те же 3:1. Только сайт — в кадр ролика
   правила .сцена не попадают, там граница остаётся 35% (демо.css и рендер/лист.ts). */
.сцена:not([data-лист="светлый"]){--кромка-пол:58%;--стекло-пол:58%}

/* Плавность библиотеки: полторы тысячи карточек — 34 тыс. узлов. Задачи за экраном
   браузер не считает и не рисует, пока к ним не подъехали; `auto` запоминает
   настоящую высоту после первого показа, полоса прокрутки перестаёт прыгать. */
section.задача{content-visibility:auto;contain-intrinsic-size:auto 640px}