@layer components{.logo{--color-1:var(--blue);--color-2:var(--magenta);width:40px;height:40px;color:var(--white);font-style:20px;font-family:var(--monospace-font);user-select:none;background:linear-gradient(135deg,var(--color-1)0%,var(--color-2)100%);border-radius:var(--radius-200);flex:0 0 40px;justify-content:center;align-items:center;font-weight:900;text-decoration:none;display:flex;position:relative}@supports (color:color-mix(in srgb, var(--color-1) 0%, var(--color-2) 100%)
  ){.logo{box-shadow:-2px -2px 10px 2px color-mix(in srgb,var(--color-1)30%,var(--color-2)15%),5px 5px 20px 4px color-mix(in srgb,var(--color-1)10%,var(--color-2)35%),10px 10px 30px 8px color-mix(in srgb,var(--color-1)10%,var(--color-2)10%)}}}
