.lm-button{position:relative!important;isolation:isolate;overflow:hidden!important;box-shadow:0 2px 5px #0003,0 9px 9px #0002!important;transition:box-shadow .2s,filter .2s!important}
.lm-button:hover:not(:disabled){box-shadow:0 2px 5px #0003,0 9px 9px #0002!important}
.lm-button:active:not(:disabled){box-shadow:inset 0 2px 4px #0006,0 1px 2px #0003!important}
.lm-button:focus-visible{outline:2px solid #c6e6ff!important;outline-offset:4px!important}
/* Кнопки неподвижны — ни наведение, ни нажатие их не сдвигают и не сжимают,
   стрелка тоже стоит. Отклик даёт подсветка: ободок, осветление, рябь. */
:is(.btn,.dc-btn,.ev-button,.slc-control,.enter):is(:hover,:active),.lm-button:is(:hover,:active){transform:none!important;translate:none!important;scale:none!important}
.lm-button .ar{transform:none!important;translate:none!important}
/* Clear glass interiors, with a lightweight masked CSS rim. */
.lm-button:is(.btn,.enter,.dc-btn,.ev-button,.slc-control,.close,.pill){
  background:linear-gradient(135deg,#ffffff12,#ffffff03 48%,#c9e5ff09)!important;
  border-color:transparent!important;
  color:#f4f7fb!important;
  --play:#272b31!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  box-shadow:inset 0 1px 1px #fff1,0 3px 10px #0002!important;
}
.lm-button:is(.btn,.enter,.dc-btn,.ev-button,.slc-control,.close,.pill):hover:not(:disabled){
  background:linear-gradient(135deg,#ffffff1c,#ffffff07 48%,#c9e5ff10)!important;
  box-shadow:inset 0 1px 1px #fff1,0 3px 10px #0002!important;
}
.lm-button:is(.btn,.enter,.dc-btn,.ev-button,.slc-control,.close,.pill):active:not(:disabled){
  box-shadow:inset 0 2px 5px #0004,inset 0 1px 1px #fff2,0 2px 6px #0002!important;
}
.lm-button.btn::before{background:transparent!important;opacity:0!important}
.lm-button .ar{color:inherit!important}
:root[data-theme="light"] .lm-button:is(.btn,.enter,.dc-btn,.ev-button,.slc-control,.close,.pill){color:#202830!important;--play:#edf2f7!important}
/* YouTube CTAs retain their red fill instead of the shared clear glass. */
:root .dc-show .dc-btn.lm-button{background:#ff002b!important;color:#fff!important;--play:#ff002b!important}
/* Угол переливов — типизированное свойство, чтобы браузер мог его анимировать.
   Где @property нет, ободок остаётся статичным на явном 0deg, но не пропадает.
   Запасное значение внутри var() не ставить: с ним Chrome перестаёт
   пересчитывать градиент за анимацией и ободок замирает. */
@property --lm-angle{syntax:'<angle>';inherits:false;initial-value:0deg}
.lm-edge{--lm-angle:0deg;position:absolute!important;inset:0!important;z-index:8!important;border-radius:inherit!important;padding:1px!important;pointer-events:none!important;background:conic-gradient(from var(--lm-angle),#30343a,#f5faff 12%,#5d6977 25%,#e7f2ff 38%,#393e47 52%,#f6faff 68%,#5b6672 82%,#30343a);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor}
.lm-edge::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,#e7f3ff99 50%,transparent 75%);opacity:0;transform:translateX(-100%);pointer-events:none}
/* Металл течёт по ободку сам; соседние кнопки сдвинуты по фазе, чтобы не мигать в унисон. */
@media(prefers-reduced-motion:no-preference){
  .lm-edge{animation:lm-rim-flow 6s linear infinite}
  .lm-button:nth-of-type(2n) .lm-edge{animation-delay:-2.7s}
}
@keyframes lm-rim-flow{to{--lm-angle:360deg}}
/* Шейдер ложится в тот же ободок: маска .lm-edge оставляет от него ровно 1px,
   ширина обводки не меняется. Холст шире кнопки, чтобы в ободок попадала
   середина рисунка, а не его затухающий край. Пока шейдер жив, CSS-переливы
   под ним не крутятся, а скорость под курсором задаёт сам шейдер. */
.lm-shader{position:absolute;inset:-14px;display:block;pointer-events:none}
.lm-edge.lm-live{animation:none}
.lm-edge.lm-live::after{display:none}
/* наведение добавляет поверх яркий блик */
@media(hover:hover) and (prefers-reduced-motion:no-preference){.lm-button:hover .lm-edge::after{animation:lm-rim-light 2.8s ease-in-out infinite}}
@keyframes lm-rim-light{0%{opacity:0;transform:translateX(-100%)}30%,65%{opacity:.6}100%{opacity:0;transform:translateX(100%)}}
/* рябь внутри красных кнопок YouTube: им нужна своя система координат и обрезка по форме */
.dc-btn{position:relative;overflow:hidden;isolation:isolate}
.lm-ripple{position:absolute!important;z-index:9!important;pointer-events:none!important;border-radius:50%;width:24px;height:24px;background:radial-gradient(circle,#ffffff80,transparent 70%);animation:lm-ripple .6s ease-out forwards}
@keyframes lm-ripple{from{transform:translate(-50%,-50%) scale(0);opacity:.65}to{transform:translate(-50%,-50%) scale(8);opacity:0}}
.lm-button:disabled .lm-edge{opacity:.45}
@media(prefers-reduced-motion:reduce){.lm-button{transition:none!important}.lm-ripple{display:none}}

/* The menu close control owns its fixed positioning, including with the rim. */
.sheet #sheetClose{position:fixed!important;top:max(26px,calc(var(--safe-t) + 10px));right:calc(var(--pad) + var(--safe-r));left:auto;bottom:auto;width:40px;height:40px;padding:0;margin:0;font-size:0;display:grid;place-items:center}
.sheet #sheetClose::before,.sheet #sheetClose::after{content:'';position:absolute;top:50%;left:50%;width:16px;height:1.5px;background:currentColor;border-radius:1px;pointer-events:none;transform:translate(-50%,-50%) rotate(45deg)}
.sheet #sheetClose::after{transform:translate(-50%,-50%) rotate(-45deg)}