.glass {
  position: relative;
  overflow: hidden;
}

.glass::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--radius) - 2px);
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--glass-highlight) 70%, transparent) 0%, transparent 55%),
    linear-gradient(140deg, color-mix(in srgb, var(--liquid-edge, rgba(255,255,255,0.25)), transparent 40%) 0%, transparent 65%);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  transition: opacity .35s ease, transform .45s ease;
  z-index: 0;
}

.glass:hover::before,
.glass:focus-within::before {
  opacity: 0.55;
  transform: translate3d(0, -2px, 0);
}

#skills .thumb.glass {
  padding: var(--thumb-pad, 10px);         
  box-shadow: none;      
  display: inline-block; 
}

/* Регулируем внутренний отступ панели на брейкпоинтах одной переменной.
   Радиус содержимого рассчитывается как (var(--radius) - var(--thumb-pad)). */
@media (max-width: 900px) {
  #skills { --thumb-pad: 8px; }
}
@media (max-width: 480px) {
  #skills { --thumb-pad: 6px; }
}

.glass > * {
  position: relative;
  z-index: 2;
}

.glass:hover,
.glass:focus-visible,
.glass:focus-within {
  background: var(--glass-hover-bg);
  border-color: var(--glass-hover-border);
  box-shadow: 0 12px 32px rgba(0,0,0,0.32);
}

.ticker.glass{ border-radius: 0 !important; }