/* Переключатель тем: шнурок сверху справа (.theme-pull) и маленькая табличка
   (.tpp), которая съезжает сверху на двух подвесах. Для каждой темы — свой
   шнурок и своя табличка: Неон — светящийся провод с кольцом и стеклянная
   плашка; Классика — цепочка лампы с деревянной бусиной и фанерка на бечёвке;
   Метро — выключатель-«груша» на витом шнуре и ржавая табличка на цепях;
   XP — провод шариковой мыши и окно Luna «Свойства: Экран».
   Превью тем — мини-сцены из CSS (.tp-pv), четыре карточки сеткой 2×2. */

/* ── шнурок: общее ── */
.theme-pull { position: absolute; top: 0; right: clamp(8px, 1.2vw, 18px); z-index: 70; width: 34px; height: 104px; padding: 0;
  display: flex; flex-direction: column; align-items: center; border: 0; background: none; cursor: pointer;
  transform-origin: 50% 0; -webkit-tap-highlight-color: transparent; }
.theme-pull .tpl-cord { flex: 1; width: 4px; display: block; }
.theme-pull .tpl-knob { position: relative; display: block; flex: none; }
.theme-pull .tpl-hint { position: absolute; right: 36px; bottom: 4px; white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translateX(6px); transition: opacity .2s, transform .2s; }
.theme-pull:not([aria-expanded="true"]):hover .tpl-hint, .theme-pull:not([aria-expanded="true"]):focus-visible .tpl-hint { opacity: 1; transform: none; }
/* у тем есть «кнопка по умолчанию» (сталь, крафт) — шнурку и табличке она не нужна */
html[data-theme] .theme-pull, html[data-theme] .tpp-snd { background: none; border-color: transparent; box-shadow: none; text-shadow: none; }
.theme-pull:hover { transform: translateY(3px); transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
.theme-pull:focus-visible { outline: none; }
.theme-pull:focus-visible .tpl-knob { outline: 2px dashed currentColor; outline-offset: 3px; }
.theme-pull.yank { animation: tplYank .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes tplYank { 0% { transform: none; } 35% { transform: translateY(18px); } 100% { transform: none; } }
/* место под шнурок: знак VG на главной сдвигается левее */
.hero-top .hero-mark { margin-right: 34px; }
@media (max-width: 560px) {
  .theme-pull { height: 78px; width: 30px; right: 4px; }
  .hero-top .hero-mark { margin-right: 28px; }
  .theme-pull .tpl-hint { display: none; }
}

/* ── табличка: общее ── */
.tpp { position: absolute; top: 0; right: clamp(46px, 4.6vw, 66px); z-index: 69; width: 292px; max-width: calc(100vw - 58px);
  padding-top: 20px; transform: translateY(calc(-100% - 6px)); transition: transform .42s cubic-bezier(.3,1.25,.5,1); }
.tpp[hidden] { display: none; }
.tpp.show { transform: none; }
.tpp.leaving { transform: translateY(calc(-100% - 6px)); transition-duration: .28s; }
/* подвесы */
.tpp::before, .tpp::after { content: ""; position: absolute; top: 0; width: 2px; height: 22px; }
.tpp::before { left: 26px; } .tpp::after { right: 26px; }
.tpp-b { position: relative; padding: 10px 10px 11px; }
.tpp-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 0 2px; }
.tpp-hd b { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.tpp-snd { margin-left: auto; width: 28px; height: 26px; display: grid; place-items: center; padding: 0; cursor: pointer;
  color: inherit; background: none; border: 1px solid transparent; border-radius: 4px; }
.tpp-snd svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tpp-snd svg path:first-child { fill: currentColor; }
.tpp-snd[aria-pressed="true"] .x, .tpp-snd[aria-pressed="false"] .w { display: none; }
.tpp-snd[aria-pressed="false"] { opacity: .55; }
.tpp-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.tpp-o { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 5px; padding: 4px 4px 6px; margin: 0;
  color: inherit; font: inherit; text-align: center; cursor: pointer; background: none; border: 1px solid transparent;
  transition: transform .15s, border-color .15s, background .15s; }
.tpp-o:hover, .tpp-o:focus-visible { transform: translateY(-2px); outline: none; }
.tpp-o b { font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.tpp-o.is-on::after { content: ""; position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%; }

/* ── превью: мини-сцены ── */
.tp-pv { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 2px; }
.tp-pv span { position: absolute; display: block; }
/* Неон: тёмное стекло, голубая рамка, розовая стрелка, плитки */
.tp-pv--neon { background: radial-gradient(circle at 20% 0, #192a44, #0d1321 60%), #0d1321; }
.tp-pv--neon .tp-s1 { left: 9%; top: 14%; width: 82%; height: 26%; border: 1px solid rgba(45,226,255,.6); box-shadow: 0 0 6px rgba(45,226,255,.35) inset, 0 0 5px rgba(45,226,255,.3); }
.tp-pv--neon .tp-s2 { left: 14%; top: 20%; width: 0; height: 0; border: 4px solid transparent; border-left: 6px solid #ff3fa4; filter: drop-shadow(0 0 3px #ff3fa4); }
.tp-pv--neon .tp-s2::after { content: ""; position: absolute; left: 3px; top: -1.5px; width: 34px; height: 3px; background: #eaf6ff; box-shadow: 0 0 5px #2de2ff; border-radius: 2px; }
.tp-pv--neon .tp-s3 { left: 9%; top: 52%; width: 82%; height: 34%;
  background: linear-gradient(90deg, rgba(255,112,38,.55) 0 23%, transparent 23% 25.5%, rgba(245,195,68,.5) 25.5% 48.5%, transparent 48.5% 51%, rgba(154,163,201,.45) 51% 74.5%, transparent 74.5% 77%, rgba(10,124,224,.6) 77%); }
.tp-pv--neon .tp-s4 { inset: 0; background: linear-gradient(transparent 94%, rgba(45,226,255,.14) 95%) 0 0 / 100% 3px; }
/* Классика: стол, перфощит, бирка, лента Dymo, карточка */
.tp-pv--classic { background: linear-gradient(180deg, rgba(255,214,160,.14), transparent 70%), repeating-linear-gradient(180deg, #4b3020 0 5px, #432a1b 5px 10px), #3a2416; }
.tp-pv--classic .tp-s1 { left: 7%; top: 12%; width: 50%; height: 74%; box-shadow: 0 0 0 2px #c59a68, 0 3px 5px rgba(0,0,0,.5);
  background: radial-gradient(circle, #160f0a 0 1px, transparent 1.3px) 0 0 / 5px 5px, #87613f; }
.tp-pv--classic .tp-s2 { left: 19%; top: 26%; width: 30%; height: 42%; transform: rotate(-5deg); background: linear-gradient(#efe2c0, #e3cf9f);
  clip-path: polygon(18% 0, 82% 0, 100% 16%, 100% 100%, 0 100%, 0 16%); }
.tp-pv--classic .tp-s2::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: 0; height: 26%; background: #3f8fd8; }
.tp-pv--classic .tp-s3 { right: 7%; top: 18%; width: 30%; height: 13%; transform: rotate(-3deg); background: linear-gradient(180deg, rgba(255,255,255,.3), rgba(0,0,0,.18)), #b3262c; }
.tp-pv--classic .tp-s4 { right: 8%; top: 44%; width: 28%; height: 42%; transform: rotate(3deg);
  background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(60,110,190,.4) 3px 4px), #f7f2e5; box-shadow: 0 2px 3px rgba(0,0,0,.45); }
/* Метро: бетон, свет лампы, знак «М», ржавая табличка, записка, «опасность» */
.tp-pv--metro { background: radial-gradient(ellipse 60% 50% at 30% -10%, rgba(233,165,74,.38), transparent 70%),
  repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, transparent 1px 5px), repeating-linear-gradient(90deg, rgba(0,0,0,.25) 0 1px, transparent 1px 10px), #1d1a16; }
.tp-pv--metro .tp-s1 { left: 9%; top: 13%; width: 23%; aspect-ratio: 1; border-radius: 50%; background: #c8102e; box-shadow: 0 0 7px rgba(200,16,46,.65); }
.tp-pv--metro .tp-s1::after { content: "М"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font: 700 9px/1 "Oswald", "Arial Narrow", sans-serif; }
.tp-pv--metro .tp-s2 { left: 39%; top: 18%; width: 53%; height: 26%; background: radial-gradient(ellipse at 20% 40%, rgba(138,62,20,.75), transparent 60%), linear-gradient(160deg, #4a4843, #2a2824);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 2px 4px rgba(0,0,0,.6); }
.tp-pv--metro .tp-s3 { left: 12%; top: 56%; width: 46%; height: 32%; transform: rotate(-3deg); background: linear-gradient(#e6dcc2, #d3c6a6); box-shadow: 0 2px 4px rgba(0,0,0,.6); }
.tp-pv--metro .tp-s4 { right: 8%; top: 54%; width: 26%; height: 34%; background: repeating-linear-gradient(-45deg, #d9a90a 0 3px, #141210 3px 6px); opacity: .85; }
/* XP: небо, холм, окно Luna, панель задач с зелёной «пуск» */
.tp-pv--xp { background: radial-gradient(ellipse 70% 60% at 50% 118%, #4f9c24 0 55%, transparent 56%), linear-gradient(180deg, #2f6fd8, #8ec3f2 70%, #cfe6fb); }
.tp-pv--xp .tp-s1 { left: 16%; top: 16%; width: 56%; height: 50%; border-radius: 3px 3px 0 0; background: linear-gradient(#0058ee, #3593ff 12%, #0054e3 30%, #0055eb 100%) 0 0 / 100% 22% no-repeat, #ece9d8;
  box-shadow: 0 0 0 1px #0831d9, 1px 2px 3px rgba(0,0,0,.4); }
.tp-pv--xp .tp-s2 { right: 31%; top: 18.5%; width: 6%; height: 7%; border-radius: 1px; background: #e04a1c; box-shadow: 0 0 0 .5px #fff; }
.tp-pv--xp .tp-s3 { left: 0; right: 0; bottom: 0; height: 13%; background: linear-gradient(#3168d5, #245edb 40%, #1941a5); }
.tp-pv--xp .tp-s4 { left: 0; bottom: 0; width: 24%; height: 13%; border-radius: 0 6px 6px 0; background: linear-gradient(#5aac56, #3a933a 50%, #2a7a2e); }

/* ═══ Неон: светящийся провод с кольцом, стеклянная плашка ═══ */
.theme-pull { color: #2de2ff; }
.theme-pull .tpl-cord { width: 2px; background: linear-gradient(#2de2ff, rgba(45,226,255,.85)); box-shadow: 0 0 6px #2de2ff, 0 0 12px rgba(45,226,255,.5); }
.theme-pull .tpl-knob { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #ff3fa4; background: radial-gradient(circle, #2de2ff 0 3px, transparent 3.5px);
  box-shadow: 0 0 8px #ff3fa4, 0 0 16px rgba(255,63,164,.55), inset 0 0 6px rgba(255,63,164,.5); }
.theme-pull .tpl-hint { color: #8fd8e8; font: 700 11px/1 "Cascadia Code", Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; }
.theme-pull:hover .tpl-knob { animation: tplNeon 1.2s steps(1) infinite; }
@keyframes tplNeon { 0%, 100% { opacity: 1; } 8% { opacity: .35; } 12% { opacity: 1; } 18% { opacity: .6; } 22% { opacity: 1; } }
.tpp::before, .tpp::after { background: #2de2ff; box-shadow: 0 0 5px #2de2ff; }
.tpp-b { color: #e9fbff; font-family: "Cascadia Code", Consolas, monospace; border: 1px solid rgba(45,226,255,.45);
  background: linear-gradient(160deg, rgba(14,24,42,.97), rgba(9,13,24,.97)); box-shadow: 0 18px 40px rgba(0,0,0,.55), 0 0 18px rgba(45,226,255,.12); }
.tpp-hd b { color: #2de2ff; text-shadow: 0 0 8px rgba(45,226,255,.5); }
.tpp-snd { color: #8fd8e8; } .tpp-snd:hover { border-color: rgba(45,226,255,.5); color: #fff; }
.tpp-o { border-color: rgba(255,255,255,.08); background: rgba(255,255,255,.025); }
.tpp-o:hover, .tpp-o:focus-visible { border-color: rgba(45,226,255,.6); }
.tpp-o.is-on { border-color: #2de2ff; box-shadow: 0 0 10px rgba(45,226,255,.2); }
.tpp-o.is-on::after { background: #2de2ff; box-shadow: 0 0 6px #2de2ff; }
.tpp-o.is-pick { border-color: #ff3fa4; }

/* ═══ Классика: цепочка лампы с деревянной бусиной, фанерка на бечёвке ═══ */
html[data-theme="classic"] .theme-pull { color: #e0b45a; }
html[data-theme="classic"] .theme-pull .tpl-cord { width: 4px; box-shadow: none;
  background: radial-gradient(circle at 50% 50%, #d9d4c9 0 1.6px, #7c766d 2px, transparent 2.3px) 0 0 / 4px 5px repeat-y; }
html[data-theme="classic"] .theme-pull .tpl-knob { width: 16px; height: 23px; border: 0; border-radius: 45% 45% 50% 50% / 35% 35% 65% 65%;
  background: radial-gradient(circle at 35% 30%, #f3dcb4, #b9875a 45%, #6f4a2c); box-shadow: 0 3px 4px rgba(0,0,0,.5); animation: none; }
html[data-theme="classic"] .theme-pull .tpl-hint { color: #e9dcc4; font: 700 18px/1 "Caveat", cursive; letter-spacing: 0; text-transform: none; text-shadow: 0 1px 0 rgba(0,0,0,.5); }
html[data-theme="classic"] .tpp::before, html[data-theme="classic"] .tpp::after { width: 2px; background: #e7dcc4; box-shadow: 1px 1px 1px rgba(0,0,0,.3); }
html[data-theme="classic"] .tpp-b { color: #1e1b18; font-family: "Golos Text", system-ui, sans-serif; border: 0; border-radius: 2px; transform: rotate(-.6deg);
  background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(0,0,0,.08)), var(--cl-grain, none), #dcc092;
  box-shadow: 0 3px 3px rgba(0,0,0,.3), 0 14px 26px rgba(0,0,0,.4); }
html[data-theme="classic"] .tpp-b::before, html[data-theme="classic"] .tpp-b::after { content: ""; position: absolute; top: 4px; width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3c8, #b8892e 60%, #6b4a18); }
html[data-theme="classic"] .tpp-b::before { left: 22px; } html[data-theme="classic"] .tpp-b::after { right: 22px; }
html[data-theme="classic"] .tpp-hd { padding-top: 6px; }
html[data-theme="classic"] .tpp-hd b { font: 700 22px/1 "Caveat", cursive; letter-spacing: 0; text-transform: none; color: #3b2a17; }
html[data-theme="classic"] .tpp-snd { color: #5a3a22; } html[data-theme="classic"] .tpp-snd:hover { border-color: rgba(60,40,20,.35); }
html[data-theme="classic"] .tpp-o { border: 0; background: #f7f2e5; box-shadow: 0 1px 1px rgba(0,0,0,.25), 0 3px 6px rgba(0,0,0,.16); }
html[data-theme="classic"] .tpp-o:nth-child(1) { transform: rotate(-1.5deg); } html[data-theme="classic"] .tpp-o:nth-child(3) { transform: rotate(1.5deg); }
html[data-theme="classic"] .tpp-o:hover, html[data-theme="classic"] .tpp-o:focus-visible { transform: translateY(-2px); background: #fff; }
html[data-theme="classic"] .tpp-o.is-on { box-shadow: 0 0 0 2px #b8232c, 0 3px 6px rgba(0,0,0,.18); }
html[data-theme="classic"] .tpp-o.is-on::after { top: -4px; right: 50%; margin-right: -6px; width: 12px; height: 12px;
  background: radial-gradient(circle at 34% 30%, #fff 0 9%, #d3272f 30%, #6e1418 80%); box-shadow: 1px 2px 2px rgba(0,0,0,.35); }
html[data-theme="classic"] .tpp-o b { font: 700 17px/1 "Caveat", cursive; letter-spacing: 0; }

/* ═══ Метро: выключатель-«груша» на витом шнуре, ржавая табличка на цепях ═══ */
html[data-theme="metro"] .theme-pull { color: #e9a54a; }
html[data-theme="metro"] .theme-pull .tpl-cord { width: 4px; box-shadow: 1px 0 2px rgba(0,0,0,.6);
  background: repeating-linear-gradient(155deg, #3a342c 0 2px, #6a5f50 2px 3px, #241f1a 3px 5px); }
html[data-theme="metro"] .theme-pull .tpl-knob { width: 22px; height: 34px; margin-top: 4px; border: 0; animation: none;
  border-radius: 50% 50% 46% 46% / 38% 38% 62% 62%;
  background: radial-gradient(ellipse 30% 22% at 34% 26%, rgba(255,240,220,.35), transparent 70%), radial-gradient(circle at 40% 35%, #5c4a3a, #2a2018 55%, #0f0b08);
  box-shadow: inset 0 -3px 5px rgba(0,0,0,.6), 0 4px 6px rgba(0,0,0,.65); }
html[data-theme="metro"] .theme-pull .tpl-knob::before { content: ""; position: absolute; left: 50%; top: -6px; width: 10px; height: 7px; margin-left: -5px; border-radius: 2px;
  background: linear-gradient(90deg, #4a4e52, #c9cdd1 50%, #4a4e52); }
html[data-theme="metro"] .theme-pull .tpl-knob::after { content: ""; position: absolute; left: 50%; top: 52%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff8a80, #c8102e 55%, #5a0a14); box-shadow: 0 0 0 1.5px #1a1410, 0 0 6px rgba(200,16,46,.55); }
html[data-theme="metro"] .theme-pull .tpl-hint { color: #d9d2c3; font: 500 12px/1 "Oswald", sans-serif; letter-spacing: .2em; text-transform: uppercase; text-shadow: 0 1px 0 #000; }
@media (prefers-reduced-motion: no-preference) {
  html[data-theme="metro"] .theme-pull:not(:hover):not(.yank) { animation: tplSway 6s ease-in-out infinite; }
}
@keyframes tplSway { 0%, 100% { transform: rotate(1.6deg); } 50% { transform: rotate(-1.6deg); } }
html[data-theme="metro"] .tpp::before, html[data-theme="metro"] .tpp::after { width: 4px; box-shadow: none;
  background: radial-gradient(ellipse 2px 3px at 50% 50%, transparent 0 1px, #8a8478 1.2px 2px, transparent 2.3px) 0 0 / 4px 6px repeat-y; }
html[data-theme="metro"] .tpp-b { color: #d9d2c3; font-family: "PT Sans", system-ui, sans-serif; border: 1.5px solid #4f4a41; border-radius: 3px;
  background: var(--mt-rivets, none), radial-gradient(ellipse 50% 40% at 85% 15%, rgba(138,62,20,.45), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.06), transparent 30%, rgba(0,0,0,.3)), linear-gradient(160deg, #2e2c27, #1b1916);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 16px 34px rgba(0,0,0,.75); padding: 12px 12px 13px; }
html[data-theme="metro"] .tpp-hd b { font: 600 15px/1 "Oswald", sans-serif; letter-spacing: .2em; color: #ebe3d2; text-shadow: 0 2px 0 rgba(0,0,0,.6); }
html[data-theme="metro"] .tpp-snd { color: #a39a89; } html[data-theme="metro"] .tpp-snd:hover { color: #fff; border-color: #e9a54a; }
html[data-theme="metro"] .tpp-o { border: 1.5px solid #3a362f; border-radius: 3px; background: rgba(0,0,0,.28); }
html[data-theme="metro"] .tpp-o:hover, html[data-theme="metro"] .tpp-o:focus-visible { border-color: #e9a54a; }
html[data-theme="metro"] .tpp-o.is-on { border-color: #c8102e; box-shadow: 0 0 10px rgba(200,16,46,.3); }
html[data-theme="metro"] .tpp-o.is-on::after { background: #7bd35a; box-shadow: 0 0 6px #7bd35a; }
html[data-theme="metro"] .tpp-o b { font: 500 12px/1 "Oswald", sans-serif; letter-spacing: .14em; text-transform: uppercase; }

/* ═══ XP: провод шариковой мыши, окно Luna «Свойства: Экран» ═══ */
html[data-theme="xp"] .theme-pull { color: #0a246a; }
html[data-theme="xp"] .theme-pull .tpl-cord { width: 3px; box-shadow: 1px 0 1px rgba(0,0,0,.25); background: linear-gradient(90deg, #8f8a7a, #e4dfcf 50%, #8f8a7a); }
html[data-theme="xp"] .theme-pull .tpl-knob { width: 24px; height: 36px; border: 0; animation: none; border-radius: 12px 12px 13px 13px / 15px 15px 21px 21px;
  background: radial-gradient(ellipse at 35% 25%, #fff, #ebe7da 45%, #bab4a1); box-shadow: 0 3px 5px rgba(0,0,0,.4), inset 0 -2px 3px rgba(0,0,0,.18); }
html[data-theme="xp"] .theme-pull .tpl-knob::before { content: ""; position: absolute; left: 11.5px; top: 0; width: 1px; height: 13px; background: #9a947f; }
html[data-theme="xp"] .theme-pull .tpl-knob::after { content: ""; position: absolute; left: 2px; right: 2px; top: 13px; height: 1px; background: #9a947f; }
html[data-theme="xp"] .theme-pull .tpl-hint { right: 34px; bottom: 6px; padding: 2px 6px; color: #000; background: #ffffe1; border: 1px solid #000;
  font: 12px/1.2 "PT Sans", Tahoma, sans-serif; letter-spacing: 0; text-transform: none; box-shadow: 2px 2px 3px rgba(0,0,0,.25); }
html[data-theme="xp"] .tpp::before, html[data-theme="xp"] .tpp::after { width: 2px; background: #6f6a5c; box-shadow: none; }
html[data-theme="xp"] .tpp-b { padding: 0 3px 8px; color: #000; font-family: "PT Sans", Tahoma, sans-serif; border-radius: 8px 8px 0 0;
  background: #ece9d8; border: 3px solid #0d53e2; border-top: 0; box-shadow: 0 0 0 1px #0831d9, 2px 4px 14px rgba(0,0,0,.45); }
html[data-theme="xp"] .tpp-hd { margin: 0 -3px 8px; height: 28px; padding: 0 4px 0 9px; border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #0058ee 0%, #3593ff 4%, #288eff 6%, #127dff 8%, #036ffc 10%, #0262ee 14%, #0057e5 20%, #0054e3 24%, #0055eb 56%, #005bf5 66%, #026afe 76%, #0062ef 86%, #0052d6 92%, #0040ab 94%, #003092 100%); }
html[data-theme="xp"] .tpp-hd b { font: 700 14px/1 "PT Sans", Tahoma, sans-serif; letter-spacing: 0; text-transform: none; color: #fff; text-shadow: 1px 1px #0f1089; }
html[data-theme="xp"] .tpp-snd { width: 21px; height: 21px; color: #fff; border: 1px solid #fff; border-radius: 3px;
  background: radial-gradient(circle at 90% 90%, #0054e9 0%, #2263d5 55%, #4479e4 70%, #a3bbec 90%, #fff 100%); box-shadow: inset 0 -1px 2px 1px #4646ff; }
html[data-theme="xp"] .tpp-snd svg { width: 13px; height: 13px; }
html[data-theme="xp"] .tpp-snd:hover { filter: brightness(1.15); }
html[data-theme="xp"] .tpp-list { padding: 0 6px; }
html[data-theme="xp"] .tpp-o { border: 1px solid #c9c6b5; border-radius: 3px; background: #fff; }
html[data-theme="xp"] .tpp-o:hover, html[data-theme="xp"] .tpp-o:focus-visible { border-color: #e5a01a; box-shadow: inset 0 0 0 1px #fbc761; }
html[data-theme="xp"] .tpp-o.is-on { border-color: #316ac5; box-shadow: inset 0 0 0 1px #316ac5; }
html[data-theme="xp"] .tpp-o.is-on b { background: #316ac5; color: #fff; }
html[data-theme="xp"] .tpp-o.is-on::after { background: radial-gradient(circle at 35% 30%, #d6ffc8, #34c52a 60%, #1a7a12); box-shadow: 0 0 0 1px #fff; }
html[data-theme="xp"] .tpp-o b { align-self: center; padding: 0 4px; font: 400 13px/1.3 "PT Sans", Tahoma, sans-serif; letter-spacing: 0; }

@media (prefers-reduced-motion: reduce) {
  .tpp, .theme-pull { transition: none !important; animation: none !important; }
}