/* Вигляд (вибрано 9–10 листопада): кольорові гами (і «Веселка», що перетікає між ними), куля «Головна», нижнє меню без фону
   зі світлом знизу й шапка, що розчиняється в сторінку.
   Гама, куля й рух вибираються в Налаштуваннях → Вигляд і зберігаються на пристрої (index.html ставить
   data-palette, data-orb, data-motion на <html>). Підключається після base.css і перекриває його кольори. */

/* ---------- гами ----------
   Кожна гама задає: шапку (--hero), світло знизу (--glow-a основне, --glow-b відтінок), колір значків нижнього меню
   (--bar-ink), акцент і кольори кулі (--o-*). Значення в :root — «Глибокий синій»; за замовчуванням вибрано «Графіт і бузок»
   (перший пункт LOOK.palette в index.html). */
:root{
  --hero:radial-gradient(120% 80% at 100% 0%,rgba(110,170,255,.38),transparent 55%),linear-gradient(165deg,#0f1f7a 0%,#1730a8 55%,#2241c4 100%);
  --glow-a:rgba(30,60,200,.34); --glow-b:rgba(110,170,255,.32); --bar-ink:#1a35b0;
  --accent:#1f3dd6; --accent-ink:#1a35b0;
  --o-b2:#030828; --o-blue:#1f3dff; --o-vio:#3f6bff; --o-lil:#9fbaff; --o-warm:#8fd0ff; --o-core:#dfe8ff; --o-deep:rgba(30,60,255,.78);
  --accent-soft:color-mix(in srgb,var(--accent) 10%,transparent); --accent-paper:color-mix(in srgb,var(--accent) 6%,transparent);
  --pill-shadow:0 8px 18px -10px color-mix(in srgb,var(--accent) 60%,transparent);
  --pill-shadow-sm:0 6px 14px -8px color-mix(in srgb,var(--accent) 55%,transparent);
}
:root[data-theme="dark"]{
  --hero:radial-gradient(120% 80% at 100% 0%,rgba(90,150,255,.22),transparent 55%),linear-gradient(165deg,#070f45 0%,#0c1b6b 55%,#12288c 100%);
  --glow-a:rgba(40,80,240,.62); --glow-b:rgba(100,160,255,.3); --bar-ink:#b8ccff;
  --accent:#9fb6ff; --accent-ink:#b8ccff;
  --accent-soft:color-mix(in srgb,var(--accent) 15%,transparent); --accent-paper:color-mix(in srgb,var(--accent) 8%,transparent);
  --pill-shadow:0 8px 18px -10px rgba(0,0,0,.7); --pill-shadow-sm:0 6px 14px -8px rgba(0,0,0,.6);
}

/* Ніч і бірюза */
:root[data-palette="sea"]{
  --hero:radial-gradient(120% 80% at 100% 0%,rgba(120,240,220,.42),transparent 55%),linear-gradient(165deg,#13306b 0%,#145a85 55%,#14808f 100%);
  --glow-a:rgba(20,120,160,.32); --glow-b:rgba(110,235,210,.32); --bar-ink:#145a85; --accent:#13708a; --accent-ink:#145a85;
  --o-b2:#03121c; --o-blue:#1f7fd6; --o-vio:#21b7c9; --o-lil:#8fe7e0; --o-warm:#ffd08a; --o-core:#d3fff8; --o-deep:rgba(20,120,200,.75)}
:root[data-theme="dark"][data-palette="sea"]{
  --hero:radial-gradient(120% 80% at 100% 0%,rgba(90,220,200,.24),transparent 55%),linear-gradient(165deg,#0b1d45 0%,#0f3b5c 55%,#115a68 100%);
  --glow-a:rgba(30,140,190,.6); --glow-b:rgba(90,230,200,.3); --bar-ink:#a9eadf; --accent:#7fd8d0; --accent-ink:#a9eadf}

/* Слива й корал */
:root[data-palette="plum"]{
  --hero:radial-gradient(120% 80% at 100% 0%,rgba(255,170,130,.45),transparent 55%),linear-gradient(165deg,#5a1d4f 0%,#82295f 55%,#a3366b 100%);
  --glow-a:rgba(160,50,110,.3); --glow-b:rgba(255,170,130,.34); --bar-ink:#82295f; --accent:#a3366b; --accent-ink:#82295f;
  --o-b2:#16040f; --o-blue:#9b3dff; --o-vio:#ff5fb2; --o-lil:#ffb8dd; --o-warm:#ffc27a; --o-core:#fff2f8; --o-deep:rgba(200,50,150,.7)}
:root[data-theme="dark"][data-palette="plum"]{
  --hero:radial-gradient(120% 80% at 100% 0%,rgba(255,150,110,.26),transparent 55%),linear-gradient(165deg,#3a0f33 0%,#561b45 55%,#6e2452 100%);
  --glow-a:rgba(190,60,130,.55); --glow-b:rgba(255,150,110,.3); --bar-ink:#ffc0dc; --accent:#f5a3c8; --accent-ink:#ffc0dc}

/* Лісова зелень */
:root[data-palette="forest"]{
  --hero:radial-gradient(120% 80% at 100% 0%,rgba(170,250,200,.4),transparent 55%),linear-gradient(165deg,#0d4a3d 0%,#11735d 55%,#16876d 100%);
  --glow-a:rgba(20,130,100,.3); --glow-b:rgba(170,250,200,.34); --bar-ink:#11735d; --accent:#12795f; --accent-ink:#0f6650;
  --o-b2:#03140f; --o-blue:#14a37a; --o-vio:#2fd6b0; --o-lil:#a6f5e2; --o-warm:#ffe08a; --o-core:#effffa; --o-deep:rgba(20,160,120,.7)}
:root[data-theme="dark"][data-palette="forest"]{
  --hero:radial-gradient(120% 80% at 100% 0%,rgba(140,240,190,.22),transparent 55%),linear-gradient(165deg,#072e26 0%,#0b4a3d 55%,#0f5e4d 100%);
  --glow-a:rgba(30,170,130,.5); --glow-b:rgba(150,245,190,.28); --bar-ink:#a6f0cf; --accent:#8fdcbc; --accent-ink:#a6f0cf}

/* Світанок */
:root[data-palette="dawn"]{
  --hero:radial-gradient(120% 90% at 100% 0%,rgba(255,200,140,.55),transparent 55%),linear-gradient(165deg,#5b3fd6 0%,#9a4fd0 50%,#e0679e 100%);
  --glow-a:rgba(200,90,190,.3); --glow-b:rgba(255,190,130,.36); --bar-ink:#7a3fc4; --accent:#8a45d0; --accent-ink:#7a3fc4;
  --o-b2:#120620; --o-blue:#6a3fff; --o-vio:#d45fd8; --o-lil:#f4b4ff; --o-warm:#ffbf80; --o-core:#fff0fb; --o-deep:rgba(150,60,230,.7)}
:root[data-theme="dark"][data-palette="dawn"]{
  --hero:radial-gradient(120% 90% at 100% 0%,rgba(255,170,120,.3),transparent 55%),linear-gradient(165deg,#2e1d7a 0%,#5a2a86 50%,#8a3468 100%);
  --glow-a:rgba(200,80,180,.5); --glow-b:rgba(255,170,110,.3); --bar-ink:#f2c4ff; --accent:#dcb0ff; --accent-ink:#f2c4ff}

/* Бурштин: глибокий бурштиново-коричневий, що переходить у золото; медово-жовте світло. Шапка досить темна, щоб білий текст читався. */
:root[data-palette="amber"]{
  --hero:radial-gradient(120% 80% at 100% 0%,rgba(255,215,110,.5),transparent 55%),linear-gradient(165deg,#5a3306 0%,#8a560c 55%,#b07a14 100%);
  --glow-a:rgba(200,130,20,.32); --glow-b:rgba(255,210,110,.38); --bar-ink:#8a560c; --accent:#a8680a; --accent-ink:#8a560c;
  --o-b2:#140c02; --o-blue:#d97706; --o-vio:#f5b400; --o-lil:#fde68a; --o-warm:#ff9f6a; --o-core:#fff7d6; --o-deep:rgba(220,140,0,.7)}
:root[data-theme="dark"][data-palette="amber"]{
  --hero:radial-gradient(120% 80% at 100% 0%,rgba(255,200,90,.26),transparent 55%),linear-gradient(165deg,#2c1a04 0%,#4a2e08 55%,#6a440c 100%);
  --glow-a:rgba(220,140,20,.5); --glow-b:rgba(255,200,100,.28); --bar-ink:#ffd890; --accent:#f5c46a; --accent-ink:#ffd890}

/* Графіт і бузок */
:root[data-palette="graphite"]{
  --hero:radial-gradient(120% 80% at 100% 0%,rgba(190,170,255,.35),transparent 55%),linear-gradient(165deg,#25262f 0%,#353748 55%,#45485e 100%);
  --glow-a:rgba(90,90,130,.26); --glow-b:rgba(190,170,255,.3); --bar-ink:#3b3d52; --accent:#4a4d66; --accent-ink:#3b3d52;
  --o-b2:#0c0c12; --o-blue:#5a6290; --o-vio:#9a8fd6; --o-lil:#d2c8f2; --o-warm:#e8c9a8; --o-core:#f1edff; --o-deep:rgba(90,100,170,.6)}
:root[data-theme="dark"][data-palette="graphite"]{
  --hero:radial-gradient(120% 80% at 100% 0%,rgba(170,150,255,.22),transparent 55%),linear-gradient(165deg,#17181e 0%,#22232d 55%,#2d2f3c 100%);
  --glow-a:rgba(120,110,190,.45); --glow-b:rgba(180,160,255,.25); --bar-ink:#d2ccef; --accent:#c5c0e6; --accent-ink:#d2ccef;
  /* Шапка тут сіра, майже як звичайна темна картка, тож картки й поля мають свої, світліші тони (11 листопада):
     інакше поле пошуку зливалося з низом шапки, а перемикач і картки — з тлом. */
  --card:#1f2029; --fill:#2a2c38}

/* ---------- «Веселка» (у коді — flow; до 10 листопада звалася «Перетікання») ----------
   Кольори дуже повільно переходять з однієї гами в іншу: синій → бірюза → зелень → бурштин → слива → світанок → графіт →
   синій (повне коло — 280 с, по 40 с на перехід). Порядок підібрано так, щоб на півдорозі між сусідами не виходив брудний колір.
   Перетікають шапка, світло знизу, значки, акцент (кнопки, виділення) і куля. Ключові кадри згенеровано з кольорів гам вище.
   Заради батареї анімація стоїть на паузі: раз на 2 с index.html перемотує її до миті за годинником. Так сторінка
   перераховує кольори не щокадру, а раз на 2 с — за цей час колір змінюється непомітно мало. */
@property --h1{syntax:"<color>";inherits:true;initial-value:#0f1f7a}
@property --h2{syntax:"<color>";inherits:true;initial-value:#1730a8}
@property --h3{syntax:"<color>";inherits:true;initial-value:#2241c4}
@property --hc{syntax:"<color>";inherits:true;initial-value:rgba(110,170,255,.38)}
@property --glow-a{syntax:"<color>";inherits:true;initial-value:rgba(30,60,200,.34)}
@property --glow-b{syntax:"<color>";inherits:true;initial-value:rgba(110,170,255,.32)}
@property --bar-ink{syntax:"<color>";inherits:true;initial-value:#1a35b0}
@property --accent{syntax:"<color>";inherits:true;initial-value:#1f3dd6}
@property --accent-ink{syntax:"<color>";inherits:true;initial-value:#1a35b0}
@property --o-b2{syntax:"<color>";inherits:true;initial-value:#030828}
:root[data-palette="flow"]{
  --hero:radial-gradient(120% 80% at 100% 0%,var(--hc),transparent 55%),linear-gradient(165deg,var(--h1) 0%,var(--h2) 55%,var(--h3) 100%);
  /* якщо рух вимкнено — стоїть «Глибокий синій» */
  --h1:#0f1f7a; --h2:#1730a8; --h3:#2241c4; --hc:rgba(110,170,255,.38);
  animation:flowL 280s linear infinite paused}
:root[data-theme="dark"][data-palette="flow"]{--h1:#070f45; --h2:#0c1b6b; --h3:#12288c; --hc:rgba(90,150,255,.22); animation-name:flowD}
@keyframes flowL{
  0%{--h1:#0f1f7a;--h2:#1730a8;--h3:#2241c4;--hc:rgba(110,170,255,.38);--glow-a:rgba(30,60,200,.34);--glow-b:rgba(110,170,255,.32);--bar-ink:#1a35b0;--accent:#1f3dd6;--accent-ink:#1a35b0;--o-b2:#030828;--o-blue:#1f3dff;--o-vio:#3f6bff;--o-lil:#9fbaff;--o-warm:#8fd0ff;--o-core:#dfe8ff;--o-deep:rgba(30,60,255,.78)}
  14.29%{--h1:#13306b;--h2:#145a85;--h3:#14808f;--hc:rgba(120,240,220,.42);--glow-a:rgba(20,120,160,.32);--glow-b:rgba(110,235,210,.32);--bar-ink:#145a85;--accent:#13708a;--accent-ink:#145a85;--o-b2:#03121c;--o-blue:#1f7fd6;--o-vio:#21b7c9;--o-lil:#8fe7e0;--o-warm:#ffd08a;--o-core:#d3fff8;--o-deep:rgba(20,120,200,.75)}
  28.57%{--h1:#0d4a3d;--h2:#11735d;--h3:#16876d;--hc:rgba(170,250,200,.4);--glow-a:rgba(20,130,100,.3);--glow-b:rgba(170,250,200,.34);--bar-ink:#11735d;--accent:#12795f;--accent-ink:#0f6650;--o-b2:#03140f;--o-blue:#14a37a;--o-vio:#2fd6b0;--o-lil:#a6f5e2;--o-warm:#ffe08a;--o-core:#effffa;--o-deep:rgba(20,160,120,.7)}
  42.86%{--h1:#5a3306;--h2:#8a560c;--h3:#b07a14;--hc:rgba(255,215,110,.5);--glow-a:rgba(200,130,20,.32);--glow-b:rgba(255,210,110,.38);--bar-ink:#8a560c;--accent:#a8680a;--accent-ink:#8a560c;--o-b2:#140c02;--o-blue:#d97706;--o-vio:#f5b400;--o-lil:#fde68a;--o-warm:#ff9f6a;--o-core:#fff7d6;--o-deep:rgba(220,140,0,.7)}
  57.14%{--h1:#5a1d4f;--h2:#82295f;--h3:#a3366b;--hc:rgba(255,170,130,.45);--glow-a:rgba(160,50,110,.3);--glow-b:rgba(255,170,130,.34);--bar-ink:#82295f;--accent:#a3366b;--accent-ink:#82295f;--o-b2:#16040f;--o-blue:#9b3dff;--o-vio:#ff5fb2;--o-lil:#ffb8dd;--o-warm:#ffc27a;--o-core:#fff2f8;--o-deep:rgba(200,50,150,.7)}
  71.43%{--h1:#5b3fd6;--h2:#9a4fd0;--h3:#e0679e;--hc:rgba(255,200,140,.55);--glow-a:rgba(200,90,190,.3);--glow-b:rgba(255,190,130,.36);--bar-ink:#7a3fc4;--accent:#8a45d0;--accent-ink:#7a3fc4;--o-b2:#120620;--o-blue:#6a3fff;--o-vio:#d45fd8;--o-lil:#f4b4ff;--o-warm:#ffbf80;--o-core:#fff0fb;--o-deep:rgba(150,60,230,.7)}
  85.71%{--h1:#25262f;--h2:#353748;--h3:#45485e;--hc:rgba(190,170,255,.35);--glow-a:rgba(90,90,130,.26);--glow-b:rgba(190,170,255,.3);--bar-ink:#3b3d52;--accent:#4a4d66;--accent-ink:#3b3d52;--o-b2:#0c0c12;--o-blue:#5a6290;--o-vio:#9a8fd6;--o-lil:#d2c8f2;--o-warm:#e8c9a8;--o-core:#f1edff;--o-deep:rgba(90,100,170,.6)}
  100%{--h1:#0f1f7a;--h2:#1730a8;--h3:#2241c4;--hc:rgba(110,170,255,.38);--glow-a:rgba(30,60,200,.34);--glow-b:rgba(110,170,255,.32);--bar-ink:#1a35b0;--accent:#1f3dd6;--accent-ink:#1a35b0;--o-b2:#030828;--o-blue:#1f3dff;--o-vio:#3f6bff;--o-lil:#9fbaff;--o-warm:#8fd0ff;--o-core:#dfe8ff;--o-deep:rgba(30,60,255,.78)}}
@keyframes flowD{
  0%{--h1:#070f45;--h2:#0c1b6b;--h3:#12288c;--hc:rgba(90,150,255,.22);--glow-a:rgba(40,80,240,.62);--glow-b:rgba(100,160,255,.3);--bar-ink:#b8ccff;--accent:#9fb6ff;--accent-ink:#b8ccff;--o-b2:#030828;--o-blue:#1f3dff;--o-vio:#3f6bff;--o-lil:#9fbaff;--o-warm:#8fd0ff;--o-core:#dfe8ff;--o-deep:rgba(30,60,255,.78)}
  14.29%{--h1:#0b1d45;--h2:#0f3b5c;--h3:#115a68;--hc:rgba(90,220,200,.24);--glow-a:rgba(30,140,190,.6);--glow-b:rgba(90,230,200,.3);--bar-ink:#a9eadf;--accent:#7fd8d0;--accent-ink:#a9eadf;--o-b2:#03121c;--o-blue:#1f7fd6;--o-vio:#21b7c9;--o-lil:#8fe7e0;--o-warm:#ffd08a;--o-core:#d3fff8;--o-deep:rgba(20,120,200,.75)}
  28.57%{--h1:#072e26;--h2:#0b4a3d;--h3:#0f5e4d;--hc:rgba(140,240,190,.22);--glow-a:rgba(30,170,130,.5);--glow-b:rgba(150,245,190,.28);--bar-ink:#a6f0cf;--accent:#8fdcbc;--accent-ink:#a6f0cf;--o-b2:#03140f;--o-blue:#14a37a;--o-vio:#2fd6b0;--o-lil:#a6f5e2;--o-warm:#ffe08a;--o-core:#effffa;--o-deep:rgba(20,160,120,.7)}
  42.86%{--h1:#2c1a04;--h2:#4a2e08;--h3:#6a440c;--hc:rgba(255,200,90,.26);--glow-a:rgba(220,140,20,.5);--glow-b:rgba(255,200,100,.28);--bar-ink:#ffd890;--accent:#f5c46a;--accent-ink:#ffd890;--o-b2:#140c02;--o-blue:#d97706;--o-vio:#f5b400;--o-lil:#fde68a;--o-warm:#ff9f6a;--o-core:#fff7d6;--o-deep:rgba(220,140,0,.7)}
  57.14%{--h1:#3a0f33;--h2:#561b45;--h3:#6e2452;--hc:rgba(255,150,110,.26);--glow-a:rgba(190,60,130,.55);--glow-b:rgba(255,150,110,.3);--bar-ink:#ffc0dc;--accent:#f5a3c8;--accent-ink:#ffc0dc;--o-b2:#16040f;--o-blue:#9b3dff;--o-vio:#ff5fb2;--o-lil:#ffb8dd;--o-warm:#ffc27a;--o-core:#fff2f8;--o-deep:rgba(200,50,150,.7)}
  71.43%{--h1:#2e1d7a;--h2:#5a2a86;--h3:#8a3468;--hc:rgba(255,170,120,.3);--glow-a:rgba(200,80,180,.5);--glow-b:rgba(255,170,110,.3);--bar-ink:#f2c4ff;--accent:#dcb0ff;--accent-ink:#f2c4ff;--o-b2:#120620;--o-blue:#6a3fff;--o-vio:#d45fd8;--o-lil:#f4b4ff;--o-warm:#ffbf80;--o-core:#fff0fb;--o-deep:rgba(150,60,230,.7)}
  85.71%{--h1:#17181e;--h2:#22232d;--h3:#2d2f3c;--hc:rgba(170,150,255,.22);--glow-a:rgba(120,110,190,.45);--glow-b:rgba(180,160,255,.25);--bar-ink:#d2ccef;--accent:#c5c0e6;--accent-ink:#d2ccef;--o-b2:#0c0c12;--o-blue:#5a6290;--o-vio:#9a8fd6;--o-lil:#d2c8f2;--o-warm:#e8c9a8;--o-core:#f1edff;--o-deep:rgba(90,100,170,.6)}
  100%{--h1:#070f45;--h2:#0c1b6b;--h3:#12288c;--hc:rgba(90,150,255,.22);--glow-a:rgba(40,80,240,.62);--glow-b:rgba(100,160,255,.3);--bar-ink:#b8ccff;--accent:#9fb6ff;--accent-ink:#b8ccff;--o-b2:#030828;--o-blue:#1f3dff;--o-vio:#3f6bff;--o-lil:#9fbaff;--o-warm:#8fd0ff;--o-core:#dfe8ff;--o-deep:rgba(30,60,255,.78)}}

/* ---------- шапка ----------
   Колір шапки малюється окремим шаром позаду вмісту — так він може виходити нижче за шапку, не чіпаючи тексту.
   На телефоні шапка коротша, а її колір виходить трохи нижче за шапку й розчиняється в сторінку.
   Шапка однакова на всіх сторінках (11 листопада): один колір гами, без кольору ролі на сторінці розмови; градієнт
   завжди однакового розміру (не розтягується під висоту шапки), тож на тій самій висоті він скрізь того самого кольору;
   згасання внизу теж скрізь однакове. Сторінки відрізняються лише тим, наскільки довга шапка.
   Переїзд стрічкою між сторінками (js/app.js, liftSky; 12 листопада): градієнт іде від темного лівого кута до світлого
   правого, тож дві шапки поруч стикалися б світлим краєм до темного. Тому на час переїзду колір шапок ховається (.skyless),
   а під сторінками стоїть один нерухомий шар того самого кольору (.hero-sky) — той самий малюнок, що й .hero::before. */
.hero,.hero.tone-mentor,.hero.tone-listener{background:none; position:relative; isolation:isolate}
.hero::before{content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit}
.hero::before,.hero-sky{background:var(--hero); background-size:100% 460px; background-repeat:no-repeat}
.hero-sky{position:fixed; z-index:-1; pointer-events:none}
.skyless .hero::before{visibility:hidden}
@media (max-width:959px){
  .hero{padding-top:calc(10px + env(safe-area-inset-top)); padding-bottom:20px}
  .hero.lifted{padding-bottom:46px}
  .lift,.hero + .lift{margin-top:-30px}
  /* колір тримається до самого низу вмісту шапки й згасає за 100 px під ним */
  .hero::before{bottom:-80px}
  .hero::before,.hero-sky{
    -webkit-mask:linear-gradient(to bottom,#000 calc(100% - 100px),rgba(0,0,0,.5) calc(100% - 50px),transparent);
            mask:linear-gradient(to bottom,#000 calc(100% - 100px),rgba(0,0,0,.5) calc(100% - 50px),transparent)}
  /* усе, що йде після шапки, лягає поверх її згасаючого кольору */
  .hero ~ *{position:relative; z-index:1}
  /* Рядок «Довідка» на Ролях стоїть просто на цьому згасанні, де колір шапки — рівно наполовину: середньо-сірий.
     У світлій темі на ньому не читається ні темний, ні білий текст, а сіра заливка довідки лягала на градієнт брудною
     плямою (12 листопада). Тож тут «Довідка» — біла обведена кнопка, як .btn.sm, у пару до «Нової ролі», а розгорнута
     довідка — біла картка, як картки ролей під нею. У темній темі все й так читається. */
  :root:not([data-theme="dark"]) .help-row details.help > summary{padding:0 11px 0 13px; border:1px solid var(--line);
    border-radius:var(--r-sm); background:var(--card); transition:background-color .15s}
  :root:not([data-theme="dark"]) .help-row details.help > summary:hover{background:var(--fill)}
  :root:not([data-theme="dark"]) .help-row .help-t{color:var(--ink); font-size:13.5px; font-weight:var(--w-strong)}
  :root:not([data-theme="dark"]) .help-row .help-body{background:var(--card); box-shadow:var(--shadow)}
}

/* ---------- куля «Головна» ----------
   Темна куля, по краю чотири тонкі нитки світла, що обертаються й раз на ~10 с сплітаються; нитки не виходять за кулю.
   На світлій темі куля світла, тіло теж усередині ниток; її варіанти — нижче. */
.ob{--s:58px; --w:max(1.6px,calc(var(--s)*.028)); position:relative; display:block; width:var(--s); height:var(--s); border-radius:50%; flex:none}
.ob::before{content:""; position:absolute; inset:9%; border-radius:50%; filter:blur(calc(var(--s)*.03));
  background:radial-gradient(farthest-side,transparent 72%,color-mix(in srgb,var(--o-blue) 30%,transparent) 96%,transparent),
    radial-gradient(50% 30% at 50% 84%,color-mix(in srgb,var(--o-blue) 50%,transparent),transparent 80%),
    radial-gradient(82% 62% at 50% 90%,var(--o-deep),transparent 76%),radial-gradient(circle,#000 45%,var(--o-b2) 100%)}
/* Заради батареї на групі ниток, що рухається, немає фільтрів (сяйва й приглушення) — інакше телефон перераховував би їх
   щокадру. Сяйво — нерухомий шар .rings::before, що малюється один раз; кольори ниток приглушено заздалегідь (--c-* нижче).
   Самі нитки лише обертаються й стискаються — це робить графічний чип. */
.ob .rings{position:absolute; inset:0; isolation:isolate; transform:scale(.9)}
.ob .rings::before{content:""; position:absolute; inset:2%; border-radius:50%; pointer-events:none;
  box-shadow:0 0 calc(var(--s)*.07) calc(var(--s)*.005) color-mix(in srgb,var(--o-vio) 32%,transparent),
    inset 0 0 calc(var(--s)*.05) color-mix(in srgb,var(--o-vio) 22%,transparent)}
:root:not([data-theme="dark"]) .ob .rings::before{display:none}
.ob .wr,.ob .st{will-change:transform}
.ob .wr{position:absolute; inset:0; animation:tg1 10s ease-in-out infinite}
.ob .wr:nth-child(2){animation-name:tg2}.ob .wr:nth-child(3){animation-name:tg3}.ob .wr:nth-child(4){animation-name:tg4}
.ob .st{position:absolute; inset:0; mix-blend-mode:screen;
  -webkit-mask:conic-gradient(from var(--a),rgba(0,0,0,.22) 0%,#000 45%,#000 58%,rgba(0,0,0,.22) 64%,rgba(0,0,0,.22) 100%);
          mask:conic-gradient(from var(--a),rgba(0,0,0,.22) 0%,#000 45%,#000 58%,rgba(0,0,0,.22) 64%,rgba(0,0,0,.22) 100%)}
.ob .st::before,.ob .st::after{content:""; position:absolute; inset:0; border-radius:50%}
/* приглушені кольори ниток (замість фільтра saturate на всій групі): колір гами, змішаний із сірим */
.ob .st{--c-blue:color-mix(in srgb,var(--o-blue) 68%,#7e8096); --c-vio:color-mix(in srgb,var(--o-vio) 68%,#8a8ca2);
  --c-warm:color-mix(in srgb,var(--o-warm) 68%,#a09a9a); --c-lil:color-mix(in srgb,var(--o-lil) 72%,#b0b2c4); --c-core:color-mix(in srgb,var(--o-core) 78%,#d0d1dc)}
:root:not([data-theme="dark"]) .ob .st{--c-blue:color-mix(in srgb,var(--o-blue) 90%,#7e8096); --c-vio:color-mix(in srgb,var(--o-vio) 90%,#7e8096);
  --c-warm:color-mix(in srgb,var(--o-warm) 90%,#a09a9a); --c-lil:color-mix(in srgb,var(--o-lil) 90%,#7e8096); --c-core:color-mix(in srgb,var(--o-core) 90%,#7e8096)}
.ob .st::before{opacity:.75; filter:blur(calc(var(--s)*.01)); background:radial-gradient(farthest-side,transparent calc(100% - var(--w)*3),
  color-mix(in srgb,var(--c-blue) 70%,transparent) calc(100% - var(--w)*2.2),color-mix(in srgb,var(--c-vio) 85%,transparent) calc(100% - var(--w)*1.5),
  color-mix(in srgb,var(--c-warm) 50%,transparent) calc(100% - var(--w)*.6),transparent 100%)}
.ob .st::after{opacity:.85; filter:blur(max(.4px,calc(var(--s)*.003))); background:radial-gradient(farthest-side,transparent calc(100% - var(--w)*1.85),
  var(--c-lil) calc(100% - var(--w)*1.5),var(--c-core) calc(100% - var(--w)*1.35),var(--c-lil) calc(100% - var(--w)*1.2),transparent calc(100% - var(--w)*.85))}
.ob .wr:nth-child(1) .st{--a:0deg; animation:s1 5.5s linear infinite}
.ob .wr:nth-child(2) .st{--a:110deg; opacity:.85; animation:s2 7s linear infinite}
.ob .wr:nth-child(3) .st{--a:220deg; opacity:.8; animation:s3 6.2s linear infinite}
.ob .wr:nth-child(4) .st{--a:300deg; opacity:.65; animation:s4 8.5s linear infinite}
/* нитки лише стискаються (масштаб ≤ 1) і ледь зсуваються — щоб не виходити за кулю */
@keyframes s1{0%{transform:rotate(0) scale(1,.93)}50%{transform:rotate(180deg) scale(.94,1)}100%{transform:rotate(360deg) scale(1,.93)}}
@keyframes s2{0%{transform:translate(-2%,1%) rotate(0) scale(.86,1)}50%{transform:translate(2%,2%) rotate(180deg) scale(1,.86)}100%{transform:translate(-2%,1%) rotate(360deg) scale(.86,1)}}
@keyframes s3{0%{transform:translate(2%,-1%) rotate(0) scale(1,.82)}50%{transform:translate(-1%,-2%) rotate(180deg) scale(.84,1)}100%{transform:translate(2%,-1%) rotate(360deg) scale(1,.82)}}
@keyframes s4{0%{transform:translate(1%,3%) rotate(0) scale(.92,.82)}50%{transform:translate(-2%,1%) rotate(180deg) scale(.82,.94)}100%{transform:translate(1%,3%) rotate(360deg) scale(.92,.82)}}
/* сплетіння раз на ~10 с — теж лише всередину */
@keyframes tg1{0%,50%,100%{transform:none}70%{transform:rotate(25deg) scale(1,.8)}}
@keyframes tg2{0%,50%,100%{transform:none}72%{transform:rotate(-30deg) scale(.8,1)}}
@keyframes tg3{0%,50%,100%{transform:none}68%{transform:rotate(40deg) scale(1,.84)}}
@keyframes tg4{0%,50%,100%{transform:none}74%{transform:rotate(-15deg) scale(.86,.78)}}

/* Світла куля для світлої теми. Тіло кулі має сидіти всередині кільця ниток (нитки йдуть на ~41–45 % розміру від центру),
   інакше край тіла випирає за них. Куля «як чорна, тільки біла»: та сама будова, що в темної кулі, — тіло всередині ниток
   із м'яким краєм, біле в центрі, знизу зібране світло кольору гами, по краю легкий тон. Нитки тонші й темніші, без ореолу.
   (До 11 листопада в Налаштуваннях можна було вибрати ще три варіанти — «Рівна», «Світіння», «Як було»; їх прибрано.) */
:root:not([data-theme="dark"]) .ob{--w:max(1.3px,calc(var(--s)*.02))}
:root:not([data-theme="dark"]) .ob::before{inset:9%; filter:blur(calc(var(--s)*.03));
  background:radial-gradient(farthest-side,transparent 70%,color-mix(in srgb,var(--o-vio) 26%,transparent) 96%,transparent),
    radial-gradient(50% 30% at 50% 84%,color-mix(in srgb,var(--o-blue) 30%,transparent),transparent 80%),
    radial-gradient(82% 62% at 50% 92%,color-mix(in srgb,var(--o-vio) 30%,transparent),transparent 76%),
    radial-gradient(circle,#fff 45%,color-mix(in srgb,var(--o-lil) 20%,#fff) 100%)}
:root:not([data-theme="dark"]) .ob .st{mix-blend-mode:normal; --o-lil:var(--o-vio); --o-core:color-mix(in srgb,var(--o-blue) 70%,var(--o-vio))}
:root:not([data-theme="dark"]) .ob .st::before{opacity:.45; filter:blur(calc(var(--s)*.006))}
:root:not([data-theme="dark"]) .ob .st::after{filter:none}
/* третя нитка завжди тепліша */
.ob .wr:nth-child(3) .st{--o-lil:color-mix(in srgb,var(--o-warm) 55%,#c9a0ff); --o-core:color-mix(in srgb,var(--o-warm) 35%,#fff)}

/* ---------- веселкова куля (Налаштування → Вигляд) ----------
   Світіння кулі й кожна нитка повільно проходять по колу веселки; нитки зсунуті на чверть кола. */
@property --o-blue{syntax:"<color>";inherits:true;initial-value:#1f3dff}
@property --o-vio{syntax:"<color>";inherits:true;initial-value:#3f6bff}
@property --o-lil{syntax:"<color>";inherits:true;initial-value:#9fbaff}
@property --o-core{syntax:"<color>";inherits:true;initial-value:#dfe8ff}
@property --o-warm{syntax:"<color>";inherits:true;initial-value:#8fd0ff}
@property --o-deep{syntax:"<color>";inherits:true;initial-value:rgba(30,60,255,.78)}
@keyframes rb{
  0%,100%{--o-blue:#b91c1c;--o-vio:#e2443d;--o-lil:#fca5a5;--o-core:#fee2e2;--o-warm:#f87171;--o-deep:rgba(220,60,60,.65)}
  14%{--o-blue:#c2410c;--o-vio:#f07a2a;--o-lil:#fdba74;--o-core:#ffedd5;--o-warm:#fb923c;--o-deep:rgba(235,110,30,.65)}
  28%{--o-blue:#b45309;--o-vio:#e9b000;--o-lil:#fde68a;--o-core:#fef9c3;--o-warm:#fbbf24;--o-deep:rgba(220,150,0,.65)}
  43%{--o-blue:#15803d;--o-vio:#3aa856;--o-lil:#86efac;--o-core:#dcfce7;--o-warm:#4ade80;--o-deep:rgba(30,150,90,.7)}
  57%{--o-blue:#0e7490;--o-vio:#1fb3c9;--o-lil:#a5f3fc;--o-core:#ecfeff;--o-warm:#22d3ee;--o-deep:rgba(20,160,200,.7)}
  71%{--o-blue:#1d4ed8;--o-vio:#2f6fe8;--o-lil:#93c5fd;--o-core:#dbeafe;--o-warm:#60a5fa;--o-deep:rgba(40,90,240,.75)}
  86%{--o-blue:#6d28d9;--o-vio:#8a4fe0;--o-lil:#d8b4fe;--o-core:#f3e8ff;--o-warm:#c084fc;--o-deep:rgba(130,70,230,.7)}}
/* на світлій кулі нитки темніші й насиченіші */
@keyframes rbL{
  0%,100%{--o-blue:#b91c1c;--o-vio:#e2443d;--o-lil:#e2443d;--o-core:#b91c1c;--o-warm:#f87171;--o-deep:rgba(220,60,60,.65)}
  14%{--o-blue:#c2410c;--o-vio:#f07a2a;--o-lil:#f07a2a;--o-core:#c2410c;--o-warm:#fb923c;--o-deep:rgba(235,110,30,.65)}
  28%{--o-blue:#b45309;--o-vio:#e9b000;--o-lil:#e9b000;--o-core:#b45309;--o-warm:#fbbf24;--o-deep:rgba(220,150,0,.65)}
  43%{--o-blue:#15803d;--o-vio:#3aa856;--o-lil:#3aa856;--o-core:#15803d;--o-warm:#4ade80;--o-deep:rgba(30,150,90,.7)}
  57%{--o-blue:#0e7490;--o-vio:#1fb3c9;--o-lil:#1fb3c9;--o-core:#0e7490;--o-warm:#22d3ee;--o-deep:rgba(20,160,200,.7)}
  71%{--o-blue:#1d4ed8;--o-vio:#2f6fe8;--o-lil:#2f6fe8;--o-core:#1d4ed8;--o-warm:#60a5fa;--o-deep:rgba(40,90,240,.75)}
  86%{--o-blue:#6d28d9;--o-vio:#8a4fe0;--o-lil:#8a4fe0;--o-core:#6d28d9;--o-warm:#c084fc;--o-deep:rgba(130,70,230,.7)}}
:root[data-orb="rainbow"] .ob{animation:rb 21s linear infinite}
:root[data-orb="rainbow"] .ob .wr:nth-child(1) .st{animation:s1 5.5s linear infinite,rb 21s linear infinite; animation-delay:0s,0s}
:root[data-orb="rainbow"] .ob .wr:nth-child(2) .st{animation:s2 7s linear infinite,rb 21s linear infinite; animation-delay:0s,-5.25s}
:root[data-orb="rainbow"] .ob .wr:nth-child(3) .st{animation:s3 6.2s linear infinite,rb 21s linear infinite; animation-delay:0s,-10.5s}
:root[data-orb="rainbow"] .ob .wr:nth-child(4) .st{animation:s4 8.5s linear infinite,rb 21s linear infinite; animation-delay:0s,-15.75s}
:root[data-orb="rainbow"]:not([data-theme="dark"]) .ob{animation-name:rbL}
:root[data-orb="rainbow"]:not([data-theme="dark"]) .ob .wr:nth-child(1) .st{animation-name:s1,rbL}
:root[data-orb="rainbow"]:not([data-theme="dark"]) .ob .wr:nth-child(2) .st{animation-name:s2,rbL}
:root[data-orb="rainbow"]:not([data-theme="dark"]) .ob .wr:nth-child(3) .st{animation-name:s3,rbL}
:root[data-orb="rainbow"]:not([data-theme="dark"]) .ob .wr:nth-child(4) .st{animation-name:s4,rbL}


/* ---------- світло знизу на телефоні ----------
   Від нижнього краю екрана піднімається слабке світло кольорів шапки — ніби її віддзеркалення (--glow-a, --glow-b з гами).
   Нижнього меню більше немає (10 листопада), тож світло лежить саме по собі: поверх сторінки, натискань не ловить,
   сторінку під собою не затемнює. */
@media (max-width:959px){
  body::after{content:""; position:fixed; left:-10%; right:-10%; bottom:-30px; z-index:9; height:220px; pointer-events:none;
    background:radial-gradient(60% 75% at 30% 100%,var(--glow-b),transparent 70%),radial-gradient(70% 85% at 62% 100%,var(--glow-a),transparent 72%);
    opacity:var(--glow-k)}
  /* сила обох світінь, знизу й згори (11 листопада: ледве помітні) */
  :root{--glow-k:.35}
  :root[data-theme="dark"]{--glow-k:.3}
  :root[data-theme="dark"] body::after{height:170px}
  /* Світло згори (11 листопада) — дзеркало нижнього: ті самі кольори, той самий розмір. Поки на екрані шапка, його немає;
     коли шапку прогорнули, воно проступає (--top-glow ставить js/app.js, topGlow) і лишається, хоч скільки гортати. */
  body::before{content:""; position:fixed; left:-10%; right:-10%; top:-30px; z-index:9; height:220px; pointer-events:none;
    background:radial-gradient(60% 75% at 70% 0%,var(--glow-b),transparent 70%),radial-gradient(70% 85% at 38% 0%,var(--glow-a),transparent 72%);
    opacity:calc(var(--top-glow,0) * var(--glow-k)); transition:opacity .25s}
  :root[data-theme="dark"] body::before{height:170px}
}

/* ---------- рух ----------
   «Завжди» (data-motion="on", за замовчуванням) — рух у застосунку є, хоч би що стояло в системі.
   «Як у системі»: коли там вимкнено анімації, куля й кольори нерухомі. */
@media (prefers-reduced-motion:reduce){
  :root:not([data-motion="on"]),:root:not([data-motion="on"]) .ob,:root:not([data-motion="on"]) .ob *{animation:none !important}
}

/* ---------- фон у глибині (Налаштування → Вигляд → Фон) ----------
   Позаду всіх карток лежить нерухомий шар .backdrop (index.html) з шістьма порожніми елементами <i>.
   Кожен варіант (data-backdrop на <html>) вмикає кілька з них і рухає по-своєму. Кольори — з гами (--o-*, --bar-ink),
   тож фон міняється разом із нею й перетікає у «Веселці».
   Заради батареї рухаються лише положення, розмір і прозорість — це робить графічний чип, сторінка нічого не перемальовує.
   Розмиття-фільтрів немає: м'який край закладено в сам малюнок плями. Коли рух вимкнено, лишається нерухома картина.
   Усе навмисно дуже повільне (10 листопада): плями великі, але міняються так поволі, що рух ледве вловиш.
   Сила кольору: --bd-a, --bd-b, --bd-c — плями, --bd-hi — найяскравіша пляма. */
.backdrop{position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; contain:strict;
  --bd-a:color-mix(in srgb,var(--o-vio) 18%,transparent); --bd-b:color-mix(in srgb,var(--o-blue) 14%,transparent);
  --bd-c:color-mix(in srgb,var(--o-warm) 32%,transparent); --bd-hi:color-mix(in srgb,var(--o-vio) 26%,transparent)}
:root[data-theme="dark"] .backdrop{
  --bd-a:color-mix(in srgb,var(--o-vio) 22%,transparent); --bd-b:color-mix(in srgb,var(--o-blue) 26%,transparent);
  --bd-c:color-mix(in srgb,var(--o-warm) 14%,transparent); --bd-hi:color-mix(in srgb,var(--o-vio) 36%,transparent)}
:root[data-backdrop="none"] .backdrop{display:none}
/* склепіння: середина світліша, краї ледь густіші — простір ніби замикається довкола */
.backdrop::before{content:""; position:absolute; inset:0;
  background:radial-gradient(130% 100% at 50% 34%,transparent 42%,color-mix(in srgb,var(--o-blue) 9%,transparent) 100%)}
:root[data-theme="dark"] .backdrop::before{
  background:radial-gradient(130% 100% at 50% 34%,color-mix(in srgb,var(--o-blue) 8%,transparent) 0%,transparent 52%,rgba(0,0,0,.4) 100%)}
/* пляма: розмір --z, колір --c, центр — у точці left/top */
.backdrop i{position:absolute; display:none; width:var(--z); height:var(--z); margin:calc(var(--z)/-2) 0 0 calc(var(--z)/-2); border-radius:50%;
  will-change:transform,opacity; --c:var(--bd-a);
  background:radial-gradient(closest-side,var(--c),color-mix(in srgb,var(--c) 92%,transparent) 14%,color-mix(in srgb,var(--c) 74%,transparent) 29%,
    color-mix(in srgb,var(--c) 52%,transparent) 44%,color-mix(in srgb,var(--c) 30%,transparent) 59%,color-mix(in srgb,var(--c) 13%,transparent) 74%,
    color-mix(in srgb,var(--c) 3%,transparent) 89%,transparent)}
/* багато сходинок у малюнку плями — щоб край танув плавно, без помітних кілець */

/* «Зірниці»: у різних місцях далеко в глибині дуже повільно займається й гасне світло — без мерехтіння,
   близько 10 с набирається й 12 с тане. У кожної плями свій період (31–67 с), тож разом вони не повторюються.
   Плями витягнуті вшир — як відблиск за хмарами, а не кружечок. Нерухома картина — три тихі плями. */
:root[data-backdrop="flares"] .backdrop i:nth-child(-n+6){display:block; opacity:0; transform:scale(.8); animation:bdFlare 37s ease-in-out infinite;
  width:calc(var(--z)*1.7); margin-left:calc(var(--z)*-.85)}
:root[data-backdrop="flares"] .backdrop i:nth-child(odd){opacity:.5; transform:none}
:root[data-backdrop="flares"] .backdrop i:nth-child(1){left:16%; top:24%; --z:40vmax; --c:var(--bd-hi)}
:root[data-backdrop="flares"] .backdrop i:nth-child(2){left:80%; top:13%; --z:26vmax; --c:var(--bd-c); animation-duration:43s; animation-delay:-17s}
:root[data-backdrop="flares"] .backdrop i:nth-child(3){left:66%; top:60%; --z:58vmax; --c:var(--bd-b); animation-duration:59s; animation-delay:-8s}
:root[data-backdrop="flares"] .backdrop i:nth-child(4){left:9%; top:74%; --z:30vmax; --c:var(--bd-hi); animation-duration:53s; animation-delay:-40s}
:root[data-backdrop="flares"] .backdrop i:nth-child(5){left:90%; top:84%; --z:44vmax; --c:var(--bd-a); animation-duration:67s; animation-delay:-29s}
:root[data-backdrop="flares"] .backdrop i:nth-child(6){left:44%; top:38%; --z:20vmax; --c:var(--bd-c); animation-duration:31s; animation-delay:-4s}
@keyframes bdFlare{0%,40%,100%{opacity:0; transform:scale(.8)} 68%{opacity:1; transform:scale(1.04)}}

/* «Далеке світло»: чотири великі плями світла дуже повільно пливуть на різній глибині — дальня мала й повільна, ближня велика й бліда.
   Один прохід — від двох до трьох з половиною хвилин. */
:root[data-backdrop="far"] .backdrop i:nth-child(-n+4){display:block}
:root[data-backdrop="far"] .backdrop i:nth-child(1){left:14%; top:18%; --z:46vmax; --c:var(--bd-hi); animation:bdFar1 170s ease-in-out infinite alternate}
:root[data-backdrop="far"] .backdrop i:nth-child(2){left:84%; top:66%; --z:74vmax; --c:var(--bd-b); animation:bdFar2 130s ease-in-out infinite alternate}
:root[data-backdrop="far"] .backdrop i:nth-child(3){left:40%; top:96%; --z:110vmax; --c:var(--bd-a); opacity:.65; animation:bdFar3 104s ease-in-out infinite alternate}
:root[data-backdrop="far"] .backdrop i:nth-child(4){left:70%; top:22%; --z:22vmax; --c:var(--bd-c); animation:bdFar4 210s ease-in-out infinite alternate}
@keyframes bdFar1{0%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(22vmax,9vmax,0) scale(1.14)} 100%{transform:translate3d(8vmax,28vmax,0) scale(.9)}}
@keyframes bdFar2{0%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(-26vmax,-12vmax,0) scale(.88)} 100%{transform:translate3d(-9vmax,-34vmax,0) scale(1.1)}}
@keyframes bdFar3{0%{transform:translate3d(-18vmax,0,0) scale(1)} 50%{transform:translate3d(22vmax,-14vmax,0) scale(1.1)} 100%{transform:translate3d(40vmax,6vmax,0) scale(.94)}}
@keyframes bdFar4{0%{transform:translate3d(0,0,0)} 50%{transform:translate3d(-9vmax,7vmax,0)} 100%{transform:translate3d(5vmax,13vmax,0)}}

/* «Промінь»: зрідка позаду карток навскоси проходить широка бліда смуга світла — як світло фар по стелі.
   Смуг три: у кожної свій нахил, швидкість і пауза; найшвидша перетинає екран близько 10 с. */
:root[data-backdrop="beam"] .backdrop i:nth-child(-n+3){display:block; left:50%; top:50%; width:80vmax; height:280vmax; margin:-140vmax 0 0 -40vmax; border-radius:0; opacity:.55;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--c) 4%,transparent) 10%,color-mix(in srgb,var(--c) 16%,transparent) 22%,color-mix(in srgb,var(--c) 40%,transparent) 33%,
    color-mix(in srgb,var(--c) 64%,transparent) 42%,color-mix(in srgb,var(--c) 74%,transparent) 50%,color-mix(in srgb,var(--c) 64%,transparent) 58%,
    color-mix(in srgb,var(--c) 40%,transparent) 67%,color-mix(in srgb,var(--c) 16%,transparent) 78%,color-mix(in srgb,var(--c) 4%,transparent) 90%,transparent)}
:root[data-backdrop="beam"] .backdrop i:nth-child(1){--c:var(--bd-a); transform:translate3d(-14vmax,0,0) rotate(24deg); animation:bdBeam1 47s ease-in-out infinite}
:root[data-backdrop="beam"] .backdrop i:nth-child(2){--c:var(--bd-c); width:52vmax; margin-left:-26vmax; transform:translate3d(190vmax,0,0) rotate(-16deg); animation:bdBeam2 73s ease-in-out infinite; animation-delay:-19s}
:root[data-backdrop="beam"] .backdrop i:nth-child(3){--c:var(--bd-b); width:120vmax; margin-left:-60vmax; transform:translate3d(30vmax,0,0) rotate(38deg); animation:bdBeam3 101s linear infinite; animation-delay:-50s}
@keyframes bdBeam1{0%{transform:translate3d(-180vmax,0,0) rotate(24deg)} 55%,100%{transform:translate3d(180vmax,0,0) rotate(24deg)}}
@keyframes bdBeam2{0%,30%{transform:translate3d(180vmax,0,0) rotate(-16deg)} 80%,100%{transform:translate3d(-180vmax,0,0) rotate(-16deg)}}
@keyframes bdBeam3{0%{transform:translate3d(-200vmax,0,0) rotate(38deg)} 100%{transform:translate3d(200vmax,0,0) rotate(38deg)}}

/* «Дихання»: світло в глибині повільно набирається й відходить, як вдих і видих. Коло — 16 с, вдих коротший за видих.
   Три плями дихають із невеликим запізненням одна від одної, тож рух не виглядає механічним. */
:root[data-backdrop="breath"] .backdrop i:nth-child(-n+3){display:block; opacity:.7; animation:bdBreath 16s ease-in-out infinite}
:root[data-backdrop="breath"] .backdrop i:nth-child(1){left:50%; top:60%; --z:130vmax; --c:var(--bd-a)}
:root[data-backdrop="breath"] .backdrop i:nth-child(2){left:24%; top:20%; --z:70vmax; --c:var(--bd-hi); animation-delay:-14.4s}
:root[data-backdrop="breath"] .backdrop i:nth-child(3){left:80%; top:82%; --z:78vmax; --c:var(--bd-b); animation-delay:-15.2s}
@keyframes bdBreath{0%,100%{opacity:.3; transform:scale(.84)} 42%{opacity:1; transform:scale(1.06)}}

/* «Марево»: нічого не рухається — світло дуже повільно перетікає з одних кутів екрана в інші й до середини.
   Три нерухомі картини світла по черзі проявляються й тануть; повне коло — понад півтори хвилини. Міняється лише прозорість. */
:root[data-backdrop="haze"] .backdrop i:nth-child(-n+3){display:block; left:0; top:0; width:100%; height:100%; margin:0; border-radius:0; opacity:0; animation:bdHaze 102s ease-in-out infinite}
:root[data-backdrop="haze"] .backdrop i:nth-child(1){opacity:1;
  background:radial-gradient(95% 75% at 10% 14%,var(--bd-hi),color-mix(in srgb,var(--bd-hi) 58%,transparent) 26%,color-mix(in srgb,var(--bd-hi) 22%,transparent) 52%,transparent 76%),
    radial-gradient(90% 70% at 94% 98%,var(--bd-b),color-mix(in srgb,var(--bd-b) 58%,transparent) 26%,color-mix(in srgb,var(--bd-b) 22%,transparent) 52%,transparent 76%)}
:root[data-backdrop="haze"] .backdrop i:nth-child(2){animation-delay:-68s;
  background:radial-gradient(90% 70% at 92% 10%,var(--bd-c),color-mix(in srgb,var(--bd-c) 58%,transparent) 26%,color-mix(in srgb,var(--bd-c) 22%,transparent) 52%,transparent 76%),
    radial-gradient(95% 75% at 4% 92%,var(--bd-a),color-mix(in srgb,var(--bd-a) 58%,transparent) 26%,color-mix(in srgb,var(--bd-a) 22%,transparent) 52%,transparent 76%)}
:root[data-backdrop="haze"] .backdrop i:nth-child(3){animation-delay:-34s;
  background:radial-gradient(80% 60% at 52% 48%,var(--bd-a),color-mix(in srgb,var(--bd-a) 58%,transparent) 26%,color-mix(in srgb,var(--bd-a) 22%,transparent) 52%,transparent 76%)}
@keyframes bdHaze{0%,100%{opacity:1} 33.3%,66.6%{opacity:0}}

/* ---------- вибір гами в Налаштуваннях ---------- */
.palettes{display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:8px}
.pal-btn{display:flex; align-items:center; gap:10px; min-height:52px; padding:8px 10px; border-radius:var(--r-md); border:0; cursor:pointer;
  background:var(--fill); color:var(--ink); text-align:left; font-size:13.5px; font-weight:var(--w-mid); box-shadow:inset 0 0 0 1px transparent}
.pal-btn[aria-pressed="true"]{background:var(--accent-soft); box-shadow:inset 0 0 0 2px var(--accent)}
.pal-btn .sw{flex:none; width:30px; height:30px; border-radius:50%}
.sw-flow{background:conic-gradient(from 200deg,#1730a8,#14808f,#16876d,#b07a14,#a3366b,#9a4fd0,#45485e,#1730a8)}
.sw-deep{background:linear-gradient(165deg,#0f1f7a,#2241c4 70%,#6eaaff)}
.sw-sea{background:linear-gradient(165deg,#13306b,#14808f 70%,#78f0dc)}
.sw-plum{background:linear-gradient(165deg,#5a1d4f,#a3366b 70%,#ffaa82)}
.sw-forest{background:linear-gradient(165deg,#0d4a3d,#16876d 70%,#aafac8)}
.sw-dawn{background:linear-gradient(165deg,#5b3fd6,#e0679e 70%,#ffc88c)}
.sw-amber{background:linear-gradient(165deg,#5a3306,#b07a14 70%,#ffd76e)}
.sw-graphite{background:linear-gradient(165deg,#25262f,#45485e 70%,#beaaff)}